0

我试图让一个 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>

这是我能得到的最接近的，但盒子不均匀。可能是因为我使用 float 和一个 div 而不是另一个。如果我将 float:left 与右侧 div 的宽度一起使用，则不会填满屏幕的其余部分。帮助！

4

2 回答 2

1

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

这样你就可以摆脱那些元素上的floatand margin-left，它们会整齐地坐在一起。这还具有确保两个元素具有相同高度的好处，因此即使您height关闭属性，它们也将保持不变（相对于彼此）

看看这个演示：

http://jsfiddle.net/zg6xt/

于 2013-10-21T00:55:49.027 回答
0

尝试将左右 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。适用于您现在的子 div：

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

我希望这有帮助。我倾向于让左右容器都向左浮动以用于响应目的并使用动态宽度（又名百分比）希望这能让你摆脱困境！

于 2013-10-21T01:02:49.927 回答