Question

我在FF上有以下代码正常工作。正如你猜测的那样，我希望以下两个div保持在一行而不会在浏览器调整大小时中断。

<div style="float: left;  margin-right: 10px; ">

</div>

<div style="overflow: hidden;">

</div>

但是按照惯例，当我用IE 9测试页面时，正确的div已经低于左边的那个。

有人可以帮助我，谢谢，

Answer 1

您还float另一个div

<div style="float: left;  margin-right: 10px; ">

</div>

<div style="float:right; overflow: hidden;">

</div>

=============================================== ===========＆GT;＆GT;＆GT;

<强>更新

HTML

<div class="marginRight"></div>
<div></div>

CSS

div {
    float:left;
    border:1px solid red;
    width:45%;
    height:100px;
}
.marginRight {margin-right: 10px;}

工作DEMO

Answer 2

在您的第二个div中添加"float:right“或将"width:XXpx"添加到您的第一个div中。

Answer 3

用另一个div包裹

<div>
   <div style="float: left;  margin-right: 10px; ">

   </div>

   <div style="float:right; overflow: hidden;">

   </div>
</div>

Answer 4

工作正常

如果您想要更多配置

<div style="display:table-row;">
 <div style="width:49%; margin-right:2%; height:100px; float:left; display:table-cell;"> any thing you wanted  </div>
 <div style="width:49%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
</div>

Answer 5

使用容器div并将两个div设置为页面总宽度的百分比或总px。

#containerdiv {
width:100%;
overflow:hidden;
}
#leftdiv {
width:20%;
overflow:hidden;
float:left;
#rightdiv {
width:80%;
overflow:hidden;
float:left;
}


<div id="containerdiv">
<div id="leftdiv"> TEST </div>
<div id="rightdiv"> TEST </div>
</div>

请记住，如果使用边距和填充，则需要调整其百分比或像素，以便下一步排列。例如。如果你向左div添加填充1％，它会将右div向下推到第二行，因为你现在总共占容器div宽度的101％。

CSS IE在一行中有两个div的问题

5 个答案: