Question

我创建了三个我希望从左到右显示的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;
}

谢谢！

Answer 1

Float不适用于position: absolute.尝试将其更改为position: relative;

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

Answer 2

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

Answer 3

这是因为浏览器无法水平容纳所有div，即div的宽度总和更多是页面宽度。尝试更改div宽度。

Answer 4

正如评论中所述，您无法将position: absolute与float一起使用。将其更改为position: relative应该可以解决大部分问题。我创建了一个fiddle来可视化它。我添加了一些颜色以使其更加明显，我还将#middleleft设置为height: 100%，否则它们将无法正确浮动。我不知道这是否适用于您的网站开箱即用。

Answer 5

试试这个

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

您不需要浮动或位置相对或位置绝对：）

奇怪的Div定位

5 个答案: