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

Question

嘿，我有以下 HTML 和 CSS，我不能强制 IE 正确显示我的内容。中心和右侧的 div 在每个组合中跳出，我尝试过溢出，我清除了以前在 html 中 float 的内容，但它不会工作。它适用于所有其他浏览器，但不适用于 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;
}

您似乎缺少中心或“中间”容器上的 float 。如果“左”和“右”容器是 float 的，那么“中间”容器也必须是 float 的，否则你的布局将被抛弃。您还可以:

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

如果您有理由将该容器放在右侧，如您的代码所示。最重要的是，您的“中间”容器需要一个 float 。