0

我创建了三个我想从左到右出现的 DIV。

<div id="middle">
     <div id="middleleft"></div>
     <div id="middleleftopenclose"></div>
     <div id="middleright"></div>
</div>

但是，DIV middleleftopenclose 一直出现在左侧，而不是在middleleft之后。这是为什么？

#middle {
    position: relative;
    height: 100%;
}
#middleleft {
    width: 445px;
    float: left;
}
#middleleftopenclose {
    background-color:#2a2729;
    position: absolute;
    height: 100%;
    width: 15px;
    float: left;
}
#middleright {
    height: 100%;
    margin-left: 460px;
}

谢谢！

4

5 回答 5

3

Float doesn't work with position: absolute. Try changing it to position: relative;

#middleleft {
    width: 445px;
    float: left;
    position: relative;
}
#middleleftopenclose {
    background-color:#2a2729;
    position: relative;
    height: 100%;
    width: 15px;
    float: left;
}
于 2012-11-22T21:30:24.847 回答
1

As mentioned in a comment, you can't use position: absolute together with float. Changing it to position: relative should fix most of it. I created a fiddle to visualize it. I added some colours to make it more obvious, and I also set the #middleleft to height: 100%, otherwise they wouldn't float correctly. I don't know if this applies to your site out of the box.

于 2012-11-22T21:30:16.477 回答
1

删除浮动并使用 display: inline-block;

于 2012-11-22T21:20:49.973 回答
1

发生这种情况是因为浏览器无法水平容纳所有 div，即 div 的宽度之和大于页面宽度。尝试更改 div 宽度。

于 2012-11-22T21:21:16.180 回答
0

尝试这个

#middle { width: 100% }
#middle div { display: inline-block; width: 33%; }

您不需要浮动或相对位置或绝对位置:)

于 2012-11-22T21:37:11.490 回答