DIV浮動：留下與另一個div與顯示：內聯塊包裝

我有以下代碼;DIV浮動：留下與另一個div與顯示：內聯塊包裝

<div id="first" style="float: left"> 
</div> 
<div id="second"> 
    <div id="1" style="display: inline-block;"> 
    </div> 

    <div id="2" style="display: inline-block;"> 
    </div> 
    ...... 
    <div id= "n" style="display: inline-block;"> 
    </div> 
</div>

的問題是，當#second的含量比#first含量高，那麼孩子div的在#second開始低於#first一個新的生產線。

我希望他們只下第二個div。

來源

2013-09-16 JDT

請提供的jsfiddle例子。 –

對第一個div使用'display：inline-block'而不是使用'float' css屬性。 –

jsfiddle示例是http://jsfiddle.net/pWjAL/我希望所有div在「second」中都像表格單元格一樣在下面。 – JDT

如果您知道第一個div的最大寬度/寬度，那麼只需將該寬度值作爲margin-left應用於第二個div。

Working Fiddle

更新：（如果你不知道寬度）的

#second{ 
    display: table-cell; 
}

Fiddle

來源

2013-09-16 12:40:34

這解決了這個問題，但實際上第一個div的寬度可能會有所不同。 – JDT

@JDT我更新了我的帖子。 –

一個簡單的這樣做，而不必設置任何方式寬度或邊距將觸發的塊格式上下文。

應用下面的CSS：

#second { 
    border: 1px solid blue; 
    overflow: auto; 
}

觀看演示在jsfiddle

更多有關塊格式化上下文，請參閱：
http://www.w3.org/TR/CSS2/visuren.html#block-formatting

來源

2013-09-16 12:48:10

coool .. :)我沒有意識到這一點。 –

@Mr_Green非常有用的功能，特別是在處理浮游物時。 –

這酷Marc。謝謝 – JDT

使用inline-block的而不是浮動。

嘗試：

#first, #second{ 
    display: inline-block; 
    vertical-align: top; 
}

，將確保兩者是分開的，只要它們是彼此相鄰，所以必須有一個寬度。

EXAMPLE FIDDLE

編輯

或者是的，如果你不知道寬度

#first, #second{ 
    display: table-cell; 
}

EXAMPLE FIDDLE 2

來源

2013-09-16 12:51:09

如果您嘗試此操作，您會看到'＃second'開始於＃＃第一個下面。在這種情況下，'＃second'展開以填充強制行換行的頁面寬度。 –

是的，對不起 - 爲了工作，你需要知道寬度。 table-cell是你需要的未知寬度 –

DIV浮動：留下與另一個div與顯示：內聯塊包裝

回答

相關問題