Question

IMHO以下是使用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计算... :(

Answer 1

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

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

这有帮助吗？

绝对定位div中的3列布局失败

1 个答案: