css佈局固定寬度和可變寬度在同一行

與表我可以很容易地有一個2列的行，第1列是可變寬度和第2列固定寬度像素和第1列調整大小以填充可用空間。我正在過渡到CSS，並想知道如何用CSS來做到這一點。並確保兩個div /列保持在同一行，不包裝。css佈局固定寬度和可變寬度在同一行

2009-10-17 Tuviah

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 
html, body, div { margin: 0; padding: 0; border: 0 none; } 
#left { margin-right: 300px; background: yellow; } 
#right { width: 300px; float: right; background: #ccc; } 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="right">Fixed</div> 
<div id="left">Variable</div> 
</div> 
</body> 
</html>

這有一個300像素的右列和一個變量左列。 DOCTYPE僅僅是爲了讓IE瀏覽器不太合適。建議使用reset CSS。

來源

2009-10-18 00:44:52 cletus

看起來不錯，但是左欄必須在右欄之後。這看起來很混亂。也可以這樣做，使用絕對位置和權利，如果這樣做，是不是比使用浮動和不得不重置浮動更好？ – Tuviah 2009-10-18 02:05:31

我對絕對定位的一般經驗是，它傾向於產生其他問題（例如changin z-index值，所以絕對元素會浮在菜單上方）。在這種情況下，您可以將右列設置爲絕對或相對+絕對值，但經驗讓我更喜歡浮動，即使元素處於「錯誤」順序。我不會過分擔心這一點。 – cletus 2009-10-18 02:35:43

這個佈局是一個不錯的解決方案，但是當你想要在主變量部分使用浮動時，會產生一些問題，特別是當你想使用clear：both; – 2012-08-08 04:28:31

顯式寬度的浮動幾乎是實現這一點的標準方式（由於CSS1/CSS2中的佈局有多麼有限），您也可以使用內聯塊，但最終只能做更多工作。不要忘記在父類中包含overflow：hidden和一個觸發hasLayout類似寬度的屬性。

來源

2009-10-18 00:04:40

你能給我一些範例CSS。記住第1列需要調整大小以適應固定寬度列2未使用的空間，並且在頁面調整大小時也調整大小，因此兩列不能爲固定寬度。 – Tuviah 2009-10-18 00:22:58

我假設你在這裏需要的是一個2列頁面佈局。理論上，你可以使用display：table，但是如果你需要支持任何版本的IE，那真的不是一個選項。

這是我們中有些人在從表切換到CSS時遇到的最困難的事情之一，但幸運的是，對於您來說，我們已經這樣做了5年多了，我認爲您可以爲每個問題找到一個解決方案。也許你想查看這篇經典文章：Faux Columns

請不要灰心，CSS在前幾個月只是很難，而且之後你可以用一個非常乾淨，簡單，有語義的標準方式。

來源

2009-10-18 07:34:24 Soska

此工具很容易幫助generate liquid fixed columns。

來源

2009-12-19 15:55:08 unigg

這是很好的，因爲它是純粹的CSS，很容易看到發生了什麼 – Danon 2016-11-25 13:13:11

HTML

<div class="wrapper"> 
    <div class="fixed">fixed</div> 
    <div class="variable">variable</div> 
</div>

CSS

.wrapper { 
    display: flex; 
    align-items: stretch; 
    flex-flow: row nowrap; 
    justify-content: space-between; 
} 
.fixed { 
    min-width: 200px; 
    width: 200px; 
} 
.variable { 
    width: 100%; 
}

Browser support check here.

來源

2015-10-04 13:10:34 Rax

這對我來說非常合適 – Danon 2016-11-25 13:12:02

我明顯不明白flexbox足夠了，但是我用它並刪除了所有期望的顯示：flex，它仍然有效！ – 2018-02-08 14:16:08

css佈局固定寬度和可變寬度在同一行

回答

相關問題