在CSS中並排固定寬度div和最大寬度div

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上使用了float而不在另一個div上使用了。 如果我同時使用float：left和right div的寬度，則不會填充屏幕的其余部分。 救命！

Answer 1

您可以嘗試在要並排設置為display: table;元素周圍使用包裝元素display: table; ，然后設置要display: table-cell;那些子元素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中，您將使用float左右。 該容器用於容納其子項，以免其散落在各處。 您可以根據情況在其上應用clearfix和/或margin：0自動。 應用於您現在的子div：

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

我希望這有幫助。 我傾向於使左容器和右容器都向左浮動以進行響應，並使用動態寬度（也稱為百分比），希望這能使您擺脫困境！

在CSS中並排固定寬度div和最大寬度div

問題描述

2 個解決方案

解決方案1
1 2013-10-21 00:55:49

解決方案2
0 2013-10-21 01:02:49

在CSS中並排固定寬度div和最大寬度div

問題描述

2 個解決方案

解決方案1 1 2013-10-21 00:55:49

解決方案2 0 2013-10-21 01:02:49

解決方案1
1 2013-10-21 00:55:49

解決方案2
0 2013-10-21 01:02:49