CSSの列レイアウト

。私は基本的にそれが好きです：CSSの列レイアウト

<-------><--------------> 
     <------><------> 
    400px 50%  50%

その3列、1つの固定サイズ、および残りの2つは残りのスペースの50％を占めています。私は2番目と3番目が残りのスペースの50％を占めるように思わない。

すべてのヘルプは大おかげで非常に多く、高く評価されるだろう:)

出典

2009-07-22 Anonymous

おかげでみんな！すべてソートされました –

私はちょうど完了しました、そして、私はあなたが右のものが流動的であることを望んでいたことに気付きました。 – Sneakyness

私は真剣にあなたの答えの選択肢を再検討することをお勧めします。そのバージョンはFirefoxでのみ動作します。 – cletus

まず第一に、それは常にあなたのレイアウトをラップすることをお勧めします。

+---------------BODY-----------------+ 
|<---DIV#1---><--------DIV#2-------->| 
| <---DIV3--> | <--DIV4--><--DIV5--> | 
| |   | | |  |   | | 
| |   | | |  |   | | 
| |   | | |  |   | | 
| |   | | |  |   | | 
| |   | | |__________________| | 
| |_________| | |____CLEAR DIV_____| | 
+-----------------------------------+

DIV0：次の例では、主ラッパー
DIV1：サイドバーラッパー
DIV2：コンテンツラッパー
DIV3：サイドバーコンテンツ
DIV4：たContentコンテンツ右
CLEAR DIV：フロートをクリアする
DIV5を残しました。

ラッパーはかなり重要であり、多くのことがはるかに容易になります：

出典

2009-07-22 12:48:23 MarioRicalde

auch。誰かが動作していない彼らのdivitis ... – peirix

frigginのHTMLマークアップのための強力な治療を必要とします。ただ、こちらをクリックしてください：http://csscreator.com/?q=divitisを（あなたは私がリンクを台無しに知っているように30秒を待っている（ごめんなさい（私は今投稿できます））？）全てDIV3の – peirix

まずですサイドバーブロックまたはウィジェットをセグメント化する。ユーザーがそれを望んでいたのでDiv4とdiv5がそこにあります。 div1とdiv2がラッパーです。クリアdivがフロートのためです。 – MarioRicalde

あなたの最善の策は、それはそうのように設定していることであろう。ラッパーの内側にあるものを中心にするには、ラッパーの内側のdivの左右の余白を「auto」に設定します。

<div class="bigwrapper"> 
<div class="400pxdiv"> 
    Content for 400pxdiv 
</div> 
<div class="rightwrapper"> 
    <div class="50percent1"> 
    50percent1's content 
    </div> 
    <div class="50percent2"> 
    50percent2's content 
    </div> 
</div> 
</div>

出典

2009-07-22 12:50:28 Sneakyness

ここでの問題は、 – peirix

私はこのようなものを試しました... 私は400pxのdivフロートを作った：残りのラッパーはremianingスペースを埋める2つの小区域を残して他のラッパーの50％を取るが、400px区切りを含めて行全体の50％を望んでいた。 –

bigwrapperはある幅のものになり、残っているものは – Sneakyness

マークアップ：

<div id="left">some content</div> 
<div id="main"> 
    <div>more content</div> 
    <div>still more content</div> 
</div>

CSS：

#left { 
    float: left; 
    width: 400px; 
    margin-right: -405px; /* throwing in a little extra */ 
} 

#main { 
    margin-left: 405px; /* matching the margin of #left */ 
} 

#main > div { 
    width: 50%; /* may need to make it 49.9% for some browsers */ 
}

出典

2009-07-22 12:54:36 geowa4

これは実際にはかなり近いですが、左のdivには余白が必要ありません。しかし、良い解決策！ – peirix

@peirix：#leftには負のマージンを設定して、幅を持たないようにしてください。 – geowa4

私はバリエーションのカップルを試してみました。以下はChrome 2、Firefox 3.5、IE8で動作します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> 
<head> 
<title>NLR</title> 
<style type="text/css"> 
html, body, div { margin: 0; border: 0 none; padding: 0; } 
div { height: 500px; border-collapse: collapse; } 
#wrapper { padding-left: 400px; } 
#nav { width: 400px; margin-left: -400px; float: left; background: yellow; } 
#main { overflow: hidden; background: blue; } 
#left { float: left; width: 50%; background: red; height: 300px; } 
#right { float: right; width: 50%; background: green; } 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="nav"></div> 
<div id="main"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 
</div> 
</body> 
</html>

出典

2009-07-22 12:55:29 cletus

それぞれに50％の幅を指定する場合は、#leftと#rightをフローティングする必要はありません。彼らはもはや（浮かんで）どのような高さも持たないので、実際にいくつかの悪い結果をもたらすことができます。 – geowa4

フロートなしで私はうまくいきません。だから私はそこにいる必要があると思う。 – peirix

@peirix：幅を49.9％にするか少し小さくしてみてください。ブラウザが時々愚かになることがあります。 – geowa4

-1

Firefoxで動作します。

<!DOCTYPE html> 
<title>Test</title> 
<style> 
    #A { width: 400px; float:left; outline: thin solid pink; } 
    #B { margin-left: 400px; overflow: hidden; outline: thin solid pink; } 
    #B1, #B2 { width:50%; float:left; outline: thin solid pink; } 
</style> 
<div id=A> 
    A 
</div> 
<div id=B> 
    <div id=B1> 
    B1 
    </div> 
    <div id=B2> 
    B2 
    </div> 
</div>

出典

2009-07-22 12:56:39 Ms2ger

完璧な感謝！ –

Firefoxでのみ動作します... IE7は境界線を表示せず、OperaはB1とB2を伸ばしません。 – awe

境界問題は境界線を指定しなかったためですCSS;彼はアウトラインを使いました。これはIE6/7ではサポートされていないものです。 – Val

CSSの列レイアウト

答えて

関連する問題