CSS 3列浮動小数点（2固定、1動的）

私は3つの部分で作られているヘッダーを設計しています。CSS 3列浮動小数点（2固定、1動的）

ページは流動性でなければならない：min-width:940px; max-width:1200px;

ヘッダの最初の2つの部分が固定される大きさは：

left  middle  right 
<---------><---------><-----------------> 
    134px  183px  (Fill the remaining space)

Iは、ページのサイズに応じて変更する権利部を希望します私はこれまでのことを貼り付けますが、私の問題はそれがギャップを完全に埋めるようにしています。

HTML：

<div class="main"> 

<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div>

CSS：私はコメントするのに十分な評判を持っていないが、私はちょうど欲しかった

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { float: left; width: 183px; height: 191px; background-color:#ffff00; } 
div.right { height: 191px; background-color: #ff0000; margin-left: 317px; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div> 
</div> 
</body> 
</html>

出典

2009-07-18 Anonymous

ヘッダーまたはページの残りの部分にギャップを埋めますか？ – random

これを試してみてくださいの正しさを支持する前の答え。次のようにそれを微調整し、固定液で固定：私は少し別の何かを探していた

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { height: 191px; background-color: #ff0000; margin-left: 134px; margin-right: 183px;} 
div.right { float: right; width: 183px; height: 191px; background-color:#ffff00; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="right"></div> 
<div class="middle"></div> 
</div> 
</body> 
</html>

キーポイントに気づくために： - 余白を、フロートと、エッジと重なって体を防ぐために使用されています。 - 私のケースでは、htmlのdivでdivの順序を逆にする必要があります。実際には、 "middle"のdivは必要ありません。（body要素に直接マージンを設定するだけで）マージンを設定するだけです。http://www.quirksmode.org/blog/archives/browsers/index.html

出典

2009-07-18 10:45:39 cletus

、ありがとうございました！ –

コデペン：http://codepen.io/clouddueling/pen/wyIcC –

：

.main{ 
     margin:auto; 
     min-width:940px; 
     max-width:1200px; 
     background-color:#000; 
    } 

    .left{ 
    float: left; 
    width: 134px; 
    height: 191px; 
    background-color:#0000ff; 
    } 
    .middle{ 
    float: left; 
    width: 183px; 
    height: 191px; 
    background-color:#ffff00; 
    } 

    .right{ 
    float: left; 
    width: 60%; 
    height: 191px; 
    background-color:#ff0000; 
    }

出典

2010-10-19 05:29:32

CSS 3列浮動小数点（2固定、1動的）

答えて

関連する問題