HTML CSS：固定和拉伸寬度的兩列布局

<div style="width: 800px; height: 600px"> 

    <div style="float:left; width: 100px"> 
     left fixed-width column 
    </div> 
    <div style="???"> 
     right stretching column (the width should be 700px in this case.) 
    </div> 

</div>

創建兩個列布局的標準方式是什麼，左側是固定大小，右側拉伸？HTML CSS：固定和拉伸寬度的兩列布局

我希望兩欄的風格都是獨立的。我在這裏找到了一些解決方案，但是如果我改變了左列的寬度，右列的樣式（例如邊距）需要隨之一起更改。
我不需要支持舊瀏覽器。如果它是標準的，那就好了。

來源

2012-05-13 user1392013

將overflow: hidden應用於第二個div。這將引入一個新的block formatting context。你可以在Can overflow:hidden affect layout?找到更多的信息。

jsFiddle Demo

來源

2012-05-13 10:06:52 kapa

簡單而優雅的解決方案！ – user1392013

@ user1392013如果您滿意，您可以用我答案左側的嘀嗒標記接受我的答案。 – kapa

**你必須非常小心地設置溢出：隱藏** ......記住，如果它超出了分配的區域，這將隱藏內容！即使您擁有固定數量的內容，用戶也可以控制某些可能影響您的佈局的瀏覽器顯示，例如字體大小。如果用戶增加了字體大小以獲得更舒適的閱讀效果，則可能會導致右側div的內容大於分配的空間，而「overflow：hidden」將意味着該用戶無法看到它。爲了額外的CSS價值改變，是否值得疏遠客戶？ – FluffyKitten

你也可以使用一個div來包裝兩列（和中間他們作爲一個塊，如果你喜歡） - 然後設置第一列的寬度，並使用絕對定位在第二列作其左邊框位於第一列的邊緣，右邊框位於包裝的邊緣。

<div style="width:auto; min-width:500px; margin:30px; position:relative; top:0px;"> 

<div style="width:100px; height:100px; padding:15px; background-color:aqua;"> 
</div> 

<div style="height:100px; padding:15px; position:absolute; top:0px; left:100px; right:0px; background-color:blue;"> 
</div> 

</div>

JSFiddle

來源

2014-04-08 21:04:33 Ryan

HTML CSS：固定和拉伸寬度的兩列布局

回答

相關問題