兩列CSS佈局，而不必指定右列

我想弄清楚如何創建一個佈局，可以顯示兩列，一個在左邊，一個在右邊。我很喜歡指定左列的寬度，但由於邊距和填充，我真的不想指定右列的寬度並將其留給瀏覽器來決定。兩列CSS佈局，而不必指定右列

我找不到任何這樣做的例子，人們似乎總是給所有列固定的寬度。下面是再現問題的一些示例代碼：

<html> 
<head> 
    <style type="text/css"> 
    #left, #right { 
    border: solid 1px #000000; 
    } 

    #left { 
    float: left; 
    width: 10%; 
    } 

    #right { 
    float: left; 
    } 
    </style> 
</head> 
<body> 
    <div id="left">I'm left</div> 
    <div id="right"> 
    <p>I'm right.</p> 
    <p>There is a bit more text here.</p> 
    <p>Let's assume for a moment, that there is so much text here, 
    that it cannot possibly fit on one line on any kind of monitor. 
    For this purpose, I have to write a bit of nonsense, but there is 
    always enough nonsense for this kind of task in the world. 
    I could always ask a politician, I'm sure there isn't even a single 
    cinema canvas in the world that could display such nonsense in a 
    single line. 
    </div> 
</body> 
</html>

需要注意的是，如果我會刪除格外長款，右列是足夠小，適合在同一行，它會工作。

有沒有辦法讓右欄佔據剩餘空間？

來源

2010-07-20 theone

這會爲你做它：

#left { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 200px; 
} 

#right { 
    padding-left: 200px; 
}

來源

2010-07-20 15:39:46 Pat

我相信，如果你在IE中打開它，你已經擁有的滿足您的需求。但是，爲Firefox設置這兩個div的表格屬性。請注意，該值在IE中未定義。

#left, #right { 
    border: solid 1px #000000; 
    display: table; 
}

來源

2010-07-20 15:42:01

訣竅是把溢出：隱藏到右側面板：

#left, #right { 
     border: solid 1px #000000; 
} 

#left { 
     float: left; 
     width: 10%; 
} 

#right { 
     overflow: hidden; 
}

來源

2010-07-20 18:17:16 fhd

兩列CSS佈局，而不必指定右列

回答

相關問題