html - 三列 CSS 在 IE 中不起作用

Question

嘿，我有以下 HTML 和 CSS，我无法强制 IE 正确显示我的内容。中心和右侧 div 在每种组合中都会跳出，我尝试使用溢出，我清除了 previoud 在 html 中浮动，但它不起作用。它适用于所有其他浏览器，但不适用于 IE。

HTML：

<div id="container"> 
   <div id="left"> 
   </div> 
   <div id="middle">
        <div id="middleone"> 
        </div> 
        <div id="middletwo"> 
        </div> 
    </div> 
    <div id="right"> 
    </div> 
</div>

CSS是：

#container
    {
width: 1024px; 
height:170px;
margin:auto;

    }


#left
{
    width: 415px;
    height: 89px; 
    float: left; 
    margin-top: 45px;
    margin-left: 15px; 

}


#middle
{
    height: 152px; 
    width: 300px;
        overflow: auto; 
    margin-top: 15px;   
}


     #middleone
     {

     height: 152px; 
     float: left; 

     }


     #middletwo
     {

     height: 152px; 
     float: right;

     }


#right
{
float: right; 
height: 130px; 
width: 260px;
margin-top: -132px;
margin-right: 10px; 
}

Answer 1

尝试以下操作：

#left {
    float: left;
}
#middle {
    float: left;
}
#right {
    float: left;
}

您似乎缺少中心或“中间”容器上的浮动。如果“左”和“右”容器浮动，“中间”也必须浮动，否则您的布局将被丢弃。您还可以：

#left {
    float: left;
}
#middle {
    float: left;
}
#right {
    float: right;
}

如果您有理由将该容器放在代码显示的右侧。底线，你的“中间”容器需要一个浮动。