2列のレイアウト（左の列は固定幅、右の流体は+クリア：両方）

私はこれを年齢順に整理しようとしています。私が必要なもの：2列のレイアウト（左の列は固定幅、右の流体は+クリア：両方）

私は2列のレイアウトを持っています。左側の列は固定幅220px、右側の列は流体幅です。

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Fluid</title> 
    <style type="text/css" media="screen"> 
     html, body { background: #ccc; } 
     .wrap  { margin: 20px; padding: 20px; background: #fff; } 
     .main  { margin-left: 220px; width: auto } 
     .sidebar { width: 200px; float: left; } 
     .main, 
     .sidebar { background: #eee; min-height: 100px; } 
    </style> 
</head> 
<body> 
    <div class="wrap"> 
     <div class="sidebar">This is the static sidebar</div> 
     <div class="main">This is the main, and fluid div</div> 
    </div> 
</body> 
</html>

は全く問題ありません。 CSSの構文を使用すると、右側の列にはと表示され、すべての内容は左側の列の下に移動します。これは正しい行動であり、それに対する反対はありません。

しかし、私はレリ明確に使用する必要があります。

（すべてで左の列の影響を受けません。また、下に移動しません）それはちょうど右の列のコンテキスト内に留まることを、両方の方法で、

ページデザインの基本的なフロートの概念を保持して簡単に回っていますか？

更新：私の説明から少し混乱する可能性があるので、私が何をしているのかを知るには、このリンクをご覧ください。リンク：http://jsfiddle.net/k4L5K/1/

出典

2011-07-22 Ondrej

デモ：http://jsfiddle.net/a4xyV/ –

ここにあなたの変更されたCSSだ：

html, body { 
    background: #ccc; 
} 

.wrap { 
    margin: 20px; 
    padding: 20px; 
    padding-right:240px; 
    background: #fff; 
    overflow:hidden; 
} 

.main { 
    margin: 0 -220px 0 auto; 
    width: 100%; 
    float:right; 
} 

.sidebar { 
    width: 200px; 
    float: left; 
    height: 200px; 
} 

.main, .sidebar { 
    background: #eee; min-height: 100px; 
} 

.clear { clear:both; } 
span { background: yellow }

基本的に私がやったことは.main div要素があるように、あなたのレイアウトが行われている方法を変更で右に浮かんだ。

.wrapのdivに240ピクセルのパディング、および
適切ページの流体部分を整列させるため-220pxの.main div要素の右マージン：これを行うために、我々は2つのことを追加する必要がありました。

我々は右側に.mainのdivを浮かべましたので、あなたが望むように、clear: both;は今だけ、.mainのdiv内のコンテンツに影響を与えます。

あなたはここでデモを見ることができます：http://jsfiddle.net/6d2qF/1/

出典

2011-07-23 00:29:06

これは私が探していたものです。ありがとうございました！ ;） – Ondrej

-2

はこれを試してみてください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Fluid</title> 
    <style type="text/css" media="screen"> 
     html, body { background: #ccc; } 
     .wrap  { margin: 20px; padding: 20px; background: #fff; } 
     .main  { margin-left: 220px; width: auto } 
     .sidebar { width: 200px; } 
     .main, 
     .sidebar { background: #eee; min-height: 100px; float: left; } 
     .clear {clear:both;} 
    </style> 
</head> 
<body> 
    <div class="wrap"> 
     <div class="sidebar">This is the static sidebar</div> 
     <div class="main">This is the main, and fluid div</div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

出典

2011-07-22 23:39:27 FiveTools

デモ：http://jsfiddle.net/a4xyV/1/ –

質問はかなり古いですが、ここで私が最近見つけた別のソリューションです。

.mainのdiv
必ずラッパーを作るためにoverflow: auto;を追加.wrap DIVにoverflow: hidden;を追加、またはの最後の子として.clear div要素を追加することによって、ドキュメントフローを維持する：

は、私達はちょうど2つのことを行う必要がありますhttp://jsfiddle.net/k4L5K/89/
：ここ.wrap要素

が更新フィドルです

出典

2017-05-17 09:21:10

2列のレイアウト（左の列は固定幅、右の流体は+クリア：両方）

答えて

関連する問題