三個可變寬度，等距的DIV？四關於什麼？

我有一些非常簡單的子導航，我試圖在我的網站的內容區域的頂部構建，但CSS似乎沒有任何簡單的解決方案來處理這樣的常見問題：我想要3或者頁面頂部的4個等間隔的DIV。三個可變寬度，等距的DIV？四關於什麼？

1）例如3可變寬度，等間隔DIV

[[LEFT]    [CENTER]    [RIGHT]]

2）例如4可變寬度，等距的DIV

[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]

我於僅與3的DIV的第一個問題的解決辦法是浮在左和右的DIV，然後任意大小分配給中間DIV，並給它「餘量：0 auto「。這不是一個真正的解決方案，但假設導航沒有變化，它給出了我想要結果的粗略近似值。

我對第4個DIV的第二個問題的解決方案是簡單地將DIV與以前一樣居中，但隨後在其中浮動兩個DIV，

[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]

但同樣，這需要將任意大小的中間DIV的定位，如果任何語言或圖像更改了現場製作，校準值將重新計算。而且，這只是一個過於複雜的解決方案，需要將結構與演示融合在一起。

任何幫助，非常感謝。

編輯2012年7月20日下午5:00

好吧，我把「表芯」的解決方案到位使用百分比，但我遇到了我的稍微複雜的產品中的另一問題：該問題在一方面是我所指的每個DIV實際上是一個容器，它是兩個更多的DIV的容器，它們是圖標標籤對，通過浮動或顯示內聯塊內聯。

例如http://jsfiddle.net/c3yrm/1/

正如您所看到的，列表中的最後一個元素顯示不正確。

任何幫助再次非常感謝！

編輯二零一二年七月二十日晚上7:16

與arttronics的幫助下最終解決方案：http://jsfiddle.net/CuQ7r/4/

來源

2012-07-20 M. Herold

就像這樣：http://jsfiddle.net/j08691/c3yrm/？ – j08691 2012-07-20 20:59:18

可能的重複[對於流體導航菜單，如何爲每個Breadcrumb動態調整填充？]（http://stackoverflow.com/questions/11514125/for-a-fluid-navigation-menu-how-to-adjust- padding-dynamic-for-each-breadcru） – arttronics 2012-07-20 21:56:18

這正是我想要的; 「table-cell」是否有任何瀏覽器兼容性問題，我應該知道？另外，我在table-cell div中遇到嵌套div的問題，我將在上面編輯它。 – 2012-07-20 21:59:52

參考：jsFiddle Pure CSS Demo

該溶液，同時用一個簡單的公式來確定麪包屑width的基於數目的總上面包屑的百分比float個體麪包屑。

來源

2012-07-21 02:01:41 arttronics

感謝您的解決方案。我不知道在這裏使用span標籤而不是div是很重要的。 – 2012-07-22 11:33:32

ol { 
    width: 400px; 
    /*width: 800px;*/ 

    display: table; 
    table-layout: fixed; /* the magic dust that ensure equal width */ 
    background: #ccc 
} 
ol > li { 
    display: table-cell; 
    border: 1px dashed red; 
    text-align: center 
}

喜歡這裏：http://jsfiddle.net/QzYAr/

來源

2012-07-20 20:58:15

嘿，[我認識]笨拙措辭的評論！（http://stackoverflow.com/questions/6310632/html-list-element-sharing-the-parent-width-into-equal-parts/6311029#6311029）！ – thirtydot 2012-07-20 21:10:57

你可以只使用百分比，然後將其歸結爲簡單的數學：

[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px

然後，您可以指定其容器的寬度和使用

display:inline;

，讓他們在線。

注意：如果您使用邊框來查看div在做什麼，會增加空間數量，因此您需要將元素寬度減少1％左右，或者只更改其背景顏色。

來源

2012-07-20 21:08:27 Dom

我發現這樣做的一種方法是使用彈性盒（或內聯flex）。

Here是一個很好的解釋和它如何完成的例子。

我認爲在未來，flex box將是處理這類事情的最好方式，但在其他瀏覽器趕上Mozilla關於如何使用flex-basis屬性的思路之前（最小內容， max-content，fit-content等），這些彈性盒子在響應式設計中仍然存在問題。例如，當窗口被壓扁時，內部內容（a_really_really_long_word）偶爾不能放入分配的空間，所以如果您不小心，有時可能會在屏幕右側看不到某些內容。

我想也許如果你使用flex-wrap屬性，你可能能夠確保一切都合適。 Here是另一個如何實現的例子（無論如何，在Mozilla瀏覽器中）。

我傾向於使用彈性框的寬度相當固定（不是太小）的信箋或表格，因爲它們通常將自己很好地放在一起;我傾向於使用嵌套的浮動和內聯塊對象，以便內容必須壓縮得非常小（如其他答案中所述）。

來源

2016-04-08 18:08:18

三個可變寬度，等距的DIV？四關於什麼？

回答

相關問題