2列CSS，一個響應另一個固定

Question

我需要兩列，一列響應式，另一列固定為100px width

例如，左列的100px width為100px width ，右列的寬度為剩余

在這個簡單的代碼中要放多少寬度？

<!DOCTYPE html>
<html>
<head>
    <style>
        .main{
            display: table;
            clear: both;
            width: 100%;
        }
        #left{
            float: left;
            width: 100px;
        }
        #right{
            float: right;
            /*width: ;*/
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
</body>
</html>

Answer 1

由於您已經在父級上使用display: table ，因此將子級的顯示設置為table-cell然后像您一樣為第一個table-cell一個寬度。 第二列將自動采用剩余寬度。

#left{
    display: table-cell;
    width: 100px;
}

#right{
    display: table-cell;
}

示例： https : //jsbin.com/dicuvigaka/edit?html，輸出

Answer 2

您可以使用calc()計算剩余寬度。 檢查瀏覽器兼容性表： 我可以使用calc（） 。

 html, body { margin: 0; padding: 0; } .main { width: 100%; } #left { float: left; width: 100px; background: lightblue; } #right { float: left; background-color: tomato; width: calc(100% - 100px); }

 <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <div class="main"> <div id="left"> left </div> <div id="right"> right </div> </div> </body> </html>

Answer 3

嘗試這個：

#left {
    position: absolute;
    left: 0;
    width: 100px;
}

#right {
    position: absolute;
    left: 100px;
    width: 100%;
}

2列CSS，一個響應另一個固定

問題描述

3 個解決方案

解決方案1
2 已采納 2015-07-23 01:50:41

解決方案2
1 2015-07-23 01:49:20

解決方案3
1 2015-07-23 01:51:51

2列CSS，一個響應另一個固定

問題描述

3 個解決方案

解決方案1 2 已采納 2015-07-23 01:50:41

解決方案2 1 2015-07-23 01:49:20

解決方案3 1 2015-07-23 01:51:51

解決方案1
2 已采納 2015-07-23 01:50:41

解決方案2
1 2015-07-23 01:49:20

解決方案3
1 2015-07-23 01:51:51