恕我直言，以下是使用 CSS 的典型 3 列布局。没有周围的#main-div，它看起来还不错。
<html>
<head>
<style type="text/css">
#main {
position: absolute;
left: 100px;
top: 100px;
/* width: 400px; */
}
.blue {
height: 30px;
background-color: blue;
float:right;
}
.green {
height: 30px;
background-color: green;
}
.red {
height: 30px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div id="main">
<div>
<div class="blue">RIGHT</div>
<div class="red">MIDDLE</div>
<div class="green">LEFT</div>
</div>
<div>
<div class="blue">RIGHT</div>
<div class="red">MIDDLE ####</div>
<div class="green">LEFT</div>
</div>
<div>
<div class="blue">RIGHT</div>
<div class="red">############### IN THE MIDDLE</div>
<div class="green">LEFT</div>
</div>
</div>
</body>
如果您使窗口非常小或添加#main-div，则最后一个“LEFT”将从布局中消失。我可以给它足够的宽度并且它再次工作，但我问自己是否可以告诉浏览器让中间列的宽度决定#main-div 的宽度，这样第三个 LEFT 就不会了被踢出并且整个 div 没有比需要的更宽？
我不想用 JavaScript 计算这个...:(
最佳答案
尝试将此添加到您的样式表中:
.green {float:left;}
div {height:30px;}
这有帮助吗？
关于html - 3 列布局在绝对定位的 div 中失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8973603/