如何避免包裝在CSS浮動

我有一個頁面並列2列（由float：left定義）。如何避免包裝在CSS浮動

我的問題是，當我縮小瀏覽器的比例時，右列將被放在左列下方。

我該如何避免這種情況？而且無論屏幕大小如何，它們仍然是並排的。

謝謝

2010-08-26 Himberjack

使父容器固定寬度或將溢出設置爲自動。例如，如果你的兩列200px寬

<div style="width: 400px; overflow: auto;"> 
    <div style="float: left; width: 200px;"></div> 
    <div style="float: left; width: 200px;"></div> 
</div>

來源

2010-08-26 06:21:56

感謝。我不能讓父母的自動寬度？ – Himberjack 2010-08-26 06:23:01

除非您指定寬度，否則塊元素的默認值是根據可用空間自動調整寬度。您可以使用javascript來計算加載頁面後的寬度。 – 2010-08-26 06:28:27

@oshafran因爲漂浮物很奇怪。 http://stackoverflow.com/questions/3480086/need-explanation-why-putting-right-floated-element-as-first-element-in-div-fixes/3481528#3481528 – cbednarski 2010-08-26 06:29:47

另外，如果你想讓他們調整與瀏覽器將需要定義的百分比的寬度。所以：

.div1 { 
float:left; 
width:49%; 
background:red; 
} 

.div2 { 
float:left; 
width:49%; 
background:orange; 
}

有些人會在這裏使用50％，我往往不

來源

2010-08-26 06:24:23 lnrbob

+1爲49％。良好的防範雜散像素。請注意，百分比和固定的度量（即邊距，填充，邊框）不能很好地協同工作。 – cbednarski 2010-08-26 06:28:18

如果你有「雜散像素」，你正在做一些嚴重錯誤的事情。 – 2013-08-05 18:32:34

我同意安德魯。如果您需要一個流體寬度，您只需要將其全部流體寬度或通過負邊界添加對固定寬度屬性的補償。總而言之，希望49％能做到這一點是不好的做法，尤其是因爲這個比例對所有決議來說可能都不夠。最好在造型上完全明確，可能會導致問題。當然，我是那種總是將邊距/填充/邊界重置爲0的人，這確實會導致一些開銷。對於每一個用例，可能都不需要精確的度量。 – 2013-09-20 23:52:19

如何避免包裝在CSS浮動

回答

相關問題