水平佈局：div忽略子div的寬度

Question

我目前正在嘗試創建一個基於列的可滾動水平佈局。在玩了float: left和position: absolute之後，發現他們的行爲並不像我想要的那樣，現在我回到了非常簡單的HTML--但不幸的是，我的代碼仍然沒有按預期行事。

我目前使用下面的HTML：

<div id="content"> 
<div style="height: 600px; width: 1320px;"> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
    <div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 0px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div> 
</div> 
</div> 

（JSFiddle of it here）

基本上它是工作，我遇到的問題是，content -div無視其子div的大小和反過來身體標籤也沒有正確的尺寸！ content -div具有正確的高度，但其寬度是瀏覽器窗口的寬度 - 而不是1320px。這很糟糕，因爲它意味着頁面上其他要素寬度爲100％的元素的尺寸不正確，我無法在content -div上使用邊距或填充。

我真的不明白這裏發生了什麼 - 我不使用任何浮點數或絕對元素，並且有明確大小的元素。爲什麼content -div忽略這個？它有沒有必要的大小來容納它的孩子？謝謝！

Answer 1

對內容div也使用inline-block。

默認情況下，顯示：塊元素會自動獲得100％的寬度。 因此身體有100％的寬度（視口的大小，即瀏覽器窗口大小） ，並且其子內容又具有100％的寬度。