3列布局在绝对定位分区中失败

IMHO以下是使用CSS的典型3列布局。没有周围的#maindiv，它看起来还可以。

<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>

如果使窗口非常小或添加#maindiv，则布局中的最后一个"LEFT"将退出。我可以给它一个足够的宽度，它又能工作了，但我在问自己，我是否可以告诉浏览器让中间列的宽度决定#maindiv的宽度，这样第三个LEFT就不会被踢出，整个div也不会比必要的宽？

我不想用JavaScript计算…：（

尝试将其添加到样式表中：

.green {float:left;}
div {height:30px;}

这有帮助吗？

相关内容

最新更新

热门标签：