Css 奇怪的Div定位

我创建了三个div，希望从左到右显示

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

---

谢谢

移除浮动并使用display:inline块

移除浮动并使用display:inline块

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

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

如注释中所述，您不能将

位置：绝对值

与

浮点值

一起使用。将其更改为

位置：relative

可以修复大部分问题。我创建了一个模型来可视化它。我添加了一些颜色使其更加明显，并且我还将

#middleft

设置为

高度：100%

，否则它们将无法正确浮动。我不知道这是否适用于你的网站开箱即用。

如评论中所述，你不能将

position:absolute

与

float

一起使用。将其更改为

位置：relative

可以修复大部分问题。我创建了一个模型来可视化它。我添加了一些颜色使其更加明显，并且我还将

#middleft

设置为

高度：100%

，否则它们将无法正确浮动。我不知道这是否适用于开箱即用的站点。

Float不适用于

位置：绝对。

尝试将其更改为

位置：相对

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

浮动不适用于
位置：绝对。
尝试将其更改为
位置：相对

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

试试这个

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

您不需要浮动、相对位置或绝对位置：）
试试这个

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

您不需要float或position-relative或position-absolute:）
float不适用于
position:absolute
。尝试将其更改为
position:relative
float不适用于
position:absolute
。尝试将其更改为
位置：relative
嗯，不起作用我不明白它似乎运行正常？嗯，不起作用我不明白它似乎运行正常？我只占460像素，其余设置为100%。我只占460像素，其余设置为100%。