如何避免包装在CSS浮动

问题描述：

我有一个页面并列2列（由float：left定义）。如何避免包装在CSS浮动

我的问题是，当我缩小浏览器的比例时，右列将被放在左列下方。

我该如何避免这种情况？而且无论屏幕大小如何，它们仍然是并排的。

谢谢

答

使父容器固定宽度或将溢出设置为自动。例如，如果你的两列200px宽

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

感谢。我不能让父母的自动宽度？ – Himberjack 2010-08-26 06:23:01

除非您指定宽度，否则块元素的默认值是根据可用空间自动调整宽度。您可以使用javascript来计算加载页面后的宽度。 – 2010-08-26 06:28:27

@oshafran因为漂浮物很奇怪。 http://*.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％，我往往不

+1为49％。良好的防范杂散像素。请注意，百分比和固定的度量（即边距，填充，边框）不能很好地协同工作。 – cbednarski 2010-08-26 06:28:18

如果你有“杂散像素”，你正在做一些严重错误的事情。 – 2013-08-05 18:32:34

我同意安德鲁。如果您需要一个流体宽度，您只需要将其全部流体宽度或通过负边界添加对固定宽度属性的补偿。总而言之，希望49％能做到这一点是不好的做法，尤其是因为这个比例对所有决议来说可能都不够。最好在造型上完全明确，可能会导致问题。当然，我是那种总是将边距/填充/边界重置为0的人，这确实会导致一些开销。对于每一个用例，可能都不需要精确的度量。 – 2013-09-20 23:52:19

如何避免包装在CSS浮动

相关推荐