Question

我正试图让一个div成为左侧固定大小的菜单栏。然后另一个div与右边的其余空间。

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
        <style>
                #header{
                    height:50px;
                    background-color:red;
                    border-radius:10px;
                }
                .left{
                    width:100px;
                    height:500px;
                    background-color:green;
                    border-radius:10px;
                    float:left;
                }
                .right{
                    background-color:lightskyblue;
                    border-radius:10px;
                    height:500px;
                    margin-left:100px;
                }
                #footer {
                    height:50px;
                    background-color:violet;
                    border-radius:10px;
                    clear:both;
                }
            </style>
    </head>
    <body>
        <div id="header"></div>

        <div class="left"></div>
        <div class="right">
            <h3>Andrew: The Resumé</h3>
            <p>Languages I know:</p>
            <ul>
                <li>Arabic</li>
                <li>Java</li>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </div>
        <div id="footer"></div>
    </body>
</html>

这是我能得到的最接近的，但盒子不均匀。可能是因为我使用了一个div而不是另一个div。如果我使用float：left，右边div的宽度都不会填满屏幕的其余部分。救命啊！

Answer 1

您可以尝试在要并排的元素周围使用包装元素，设置为display: table;，然后将这些子元素设置为display: table-cell;

通过这种方式，你可以摆脱这些元素上的float和margin-left，它们将整齐地排列在一起。这也有利于确保两个元素具有相同的高度，因此即使您关闭height属性，它们也将保持不变（相对于彼此）

查看此演示：

http://jsfiddle.net/zg6xt/

Answer 2

尝试将左右div包装在容器中。

<div id="container">
        <div class="left"></div>
        <div class="right">
            <h3>Andrew: The Resumé</h3>
            <p>Languages I know:</p>
            <ul>
                <li>Arabic</li>
                <li>Java</li>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </div>
</div>

在你的CSS中你会左右浮动。这个容器用来容纳孩子们来到这个地方。您可以对其应用clearfix和/或margin：0 auto，具体取决于您的具体情况。适用于你现在的孩子divs：

.left{
    float:left;
}
.right{
    float:right;
}

我希望这会有所帮助。我倾向于让左右两个容器都向左浮动以用于响应目的并使用动态宽度（a.k.a百分比）希望这会让你解开！

固定宽度div并排，CSS中的最大宽度为div

2 个答案: