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

Question

我的以下代码在 FF 上运行良好。正如您所猜到的，我希望以下两个 div 在浏览器调整大小时保持在一行上而不会中断。

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

</div>

<div style="overflow: hidden;">

</div>

但是像往常一样，当我用 IE 9 测试页面时，右边的 div 已经在左边的下面了。

有人可以在这里帮助我吗，谢谢，

Answer 1

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

Answer 2

用另一个 div 包裹它

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

   </div>

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

   </div>
</div>

Answer 3

它工作正常

如果您想要更多配置

<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 4

你也是float另一个div

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

</div>

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

</div>

==================================================== ========>>>

更新

HTML

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

CSS

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

工作演示

Answer 5

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

#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%。