3列レイアウト

-1

ここに私がやろうとしていることがあります。3列レイアウト

3列のレイアウトが必要です。左、中央、右の列と呼ぶことができます。私はメインの内容が左右の列の高さを増やすときにも何をすべきなのか分かりません。

2011-06-23 jingo

3列の液体レイアウトの素晴らしい例として、this linkをチェックすることをお勧めします。 HTMLとCSSの例のソースを見てください。また、他のさまざまなレイアウトの例も提供しています（ページの上部にあるタブを参照）。

2011-06-23 06:46:10

ここには優れたウェブサイトがあります：http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layoutsは、すべてのCSSベースの異なるレイアウトの束を持っています。

出典

2011-06-23 06:46:29

これは私が常に参照する人です。私は彼のレイアウトが本当に好きです。 –

HTML：

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>3 Columns</title>  
</head> 

    <body> 
    <div class="container"> 

    <div class="left"> 
    <h3>Left Column</h3> 
    </div> 

    <div class="center"> 
    <h3>Center column</h3>   
    /div> 

    <div class="right"> 
    <h3>Right column</h3> 
    </div> 

    </div> <!-- /container --> 

    </body> 
</html>

CSS：

.container {width: 800px; border:1px solid red; overflow:auto; } 
.left {width: 250px; border:1px dashed green; float:left} 
.center {width: 250px; border:1px dashed green; float:left} 
.right {width: 250px; border:1px dashed green; float:left}

がここにデモを参照してください： http://jsfiddle.net/z2SLL/1/

出典

2011-06-23 06:49:52 Roman

ありがとう、しかし、これは私が欲しいものではありません – jingo

を私は強く、単にセマンティックの理由であるため<table>要素を使用しないことを、私たちをお勧めします表形式のデータを表示することではありません。

代わりに、 "table"、 "table-row"、 "table-cell"などの値を使用して表示プロパティを利用してください。ここにデモがあります：http://jsfiddle.net/teddyrised/DLaCW/20/各列の内容は変化しますが、全体の高さは最も高い列の内容に従います。<div>

出典

2011-06-23 09:31:12 Terry

多分、偽の列のテクニックが必要です。それをチェックしてくださいhere、hereとhere。

液体が必要な場合やイメージがない場合（何らかの理由で）、this exampleなどのjavascriptを使用するか、this weird exampleを確認する必要があります。

とにかく、少しの情報がありますが、多くの変数とさまざまなソリューションがあるため、提供するにはあまりにも多くないです。

出典

2011-06-24 02:29:51 ramono

答えて

関連する問題