浮动左边的div不工作在IE7，但在Firefox和IE8 [英] Float left in a div does not work in IE7 but does in Firefox and IE8

问题描述

当我有三个div，所有的浮动左边，我想要的部分展开或收缩基于它们内部的数据有多长。

When I have three divs that all have float left I want the sections to expand or contract based on how long the data inside them is.

例如，如果第一个地址很长，我想要第一个框扩展和推第二个。在Firefox中，它是这样做的，但在Internet Explorer中，它需要一个宽度看起来正确。在IE7它不显示权利 - 每个div有一个表有两列，在IE7它显示第二列方式到页面的远端，而不是贴合第一列，尽管设置align = left在第二列并在第一列上设置小宽度。我有在主页中指定的doc类型，我已经尝试添加清除：两个没有运气。

For instance, if the 1st address is very long I want the 1st box to expand and push the 2nd one over. In Firefox it is doing this but in Internet Explorer it requires a width to look right. In IE7 it doesn't display right at all - each div has a table with two columns and in IE7 it shows the 2nd column way over to the far side of the page instead of snug with the 1st column despite setting align=left on the 2nd column and setting a small width on the 1st column. I have the doc type specified in the master page and I've tried adding clear:both with no luck.

为什么宽度完全改变浮动部分的显示在IE和如何解决这个？页面必须在IE7中看起来不错。

Why does the width totally change how the float section is displayed in IE and how can I fix this? The page must look nice in IE7.

.FloatingSection
{
    float:left;
    padding-bottom:10px;
    padding-right:10px;
}

<div id="FirstPerson" class="FloatingSection">
</div>
<div id="SecondPerson" class="FloatingSection">
</div>
<div id="ThirdPerson" class="FloatingSection">
</div>   

我注意到在IE8这看起来很好。

I noticed that in IE8 this looks just fine.

推荐答案

当你浮动元素时，你应该总是包含一个显式宽度。

You should almost always include an explicit width when you're floating elements.

浏览器必须猜测你的意思。在这种情况下，Firefox比IE猜测更好，但你不应该让他们猜测。

If you don't, browsers have to guess what you mean. In this case, Firefox is guessing better than IE, but you shouldn't make them guess. Be explicit where you can.

编辑：如果您希望所有三个框都随内容一起展开，建议您设置基于百分比的宽度。一般来说，您将要查找。

edit: If you want all three boxes to expand with the content, I'd suggest setting percentage-based widths. In general, you're going to want to look up techniques for fluid column layouts.

这篇关于浮动左边的div不工作在IE7，但在Firefox和IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！