2013-09-01 28 views
4

我正在使用css3列計數和列間距選項實現多列布局。大量的div被安排在主div內的2列中。問題是我想在重疊邊界的內部div中使用下拉菜單。CSS3列計數塊重疊覆蓋

問題:css3列選項會阻止其父母div在谷歌Chrome重疊的下拉菜單。試圖改變z-index和溢出選項..任何想法?謝謝!

Plunker:http://plnkr.co/edit/8CqzQkvP9emIWvSXBses?p=preview

編輯:好像鉻正在處理CSS3列在一般相當馬車。舉例來說,只要我將啓動符號圖標放入按鈕中,我就會看到更多問題。通常需要兩次點擊才能打開下拉菜單。另外,firefox在div中分佈更均勻。沒有發現任何有關這些問題..?

+0

什麼瀏覽器你有問題? –

+0

最新谷歌瀏覽器,截圖可視化下拉部分的截圖:http://d.pr/i/WqT - 你是對的,它在Firefox中工作正常。 – ahoereth

+1

我使用Google Chrome瀏覽器,看不到沒有問題? –

回答

1

首先,z-index不會對嵌套元素做任何事情,與其父母相比。由於您嘗試重疊列,因此DOM中沒有元素實際重疊。列不是專門用於佈局的。相反,它們旨在在水平佈局上創建可讀的長文本。

您在Chrome中看到的內容直接來自W3C specification for multi-column layouts and how they should handle overflow。在這裏設置任何溢出並不涉及列,而只涉及列的容器。

如果您想完成您在此之後的佈局,我強烈建議您查看一個網格系統,如960 GridBootstrap's grid system