HTML/CSSで3ボックスレイアウトを実装する

this layoutでHTMLページを作成したいだけです。HTML/CSSで3ボックスレイアウトを実装する

どのようにすれば、HTML divとCSSのみで、テーブルレスで達成できますか？

検索ボックス、人気商品、広告ボックスがあります。

出典

2012-01-10 Bias Tegaralaga

あなたはまだ何か試しましたか（それを見ることができますか？） –

これは私の現在のレイアウトhttp://dl.dropbox.com/u/50241709/upload/misc/img/layoutです。PNG 検索ボックスの下にいくつかの広告ボックスを作ってほしいだけです –

フロートと幅960ピクセルを使用して設定します。

これに合わせて調整することができます。

HTML：

<div id="area-wrap"> 
    <div id="hot-product">Hot Product<br />Goes<br />Here</div> 
    <div id="search-box">Search Box</div> 
    <div id="advertisements">Advertisements</div> 
</div>

CSS：

#area-wrap { 
    width:960px; 
} 

#search-box { 
    float:left; 
    background:red; 
    width:450px; 
    margin-left:20px; 
    margin-right:20px; 
    color:#fff; 
    margin-bottom:20px; 
} 

#advertisements { 
    float:left; 
    background:blue; 
    width:450px; 
    margin-left:20px; 
    margin-right:20px; 
    color:#fff; 
} 

#hot-product { 
    float:right; 
    background:green; 
    width:450px; 
    margin-right:20px; 
    color:#fff; 
}

ここJSFiddleです：http://jsfiddle.net/82QnL/1/< ---ライブデモ

・ホープ、このことができます！

出典

2012-01-10 23:16:50 Jassi

ここに行ってください！

HTMLファイル：

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="test.css"> 
</head> 
<body> 
    <div class="top-left"> 
    top-left 
    </div> 
    <div class="bottom-left"> 
    bottom-left 
    </div> 
    <div class="right"> 
    right 
    </div> 
</body> 
</html>

同じディレクトリにあるCSSファイル：

.top-left { 
    height: 200px; 
    position: absolute; 
    width: 25%; 
    background-color: blue; 
} 
.bottom-left { 
    height: 200px; 
    position: absolute; 
    width: 25%; 
    top: 220px; 
    background-color: red; 
} 
.right { 
    height: 413px; 
    position: absolute; 
    width: 72%; 
    left: 27%; 
    background-color: green; 
}

出典

2012-01-10 23:10:13 11101101b

あなたの応答は後でプレースホルダになるでしょうか？ – fcalderan

私はコードを掲載しました、私はちょうどそれが働いていることを確認したいと思いました。なぜ皆が私をダウングレードしたのですか？ – 11101101b

答えの男のためにありがとう、私はすでに位置なしでそれをやった：D –

この

<div id="wrapper"> 
    <div id="leftTop" style="position: absolute;height: 200px;width: 300px;border: 1px solid black;"></div> 
    <div id="leftBottom" style="position: absolute;top: 220px;height: 200px;width: 300px;border: 1px solid black;"></div> 
    <div id="right" style="position: absolute;left: 320px;height: 410px;width: 300px;border: 1px solid black;"> 
    </div> 

</div>

を試してみて、あなたが探している場合は実施例here

出典

2012-01-10 23:13:57 jacktheripper

ありがとう、しかし、私は私のページでこの位置が必要です：絶対はうまく動作しないようです –

を見ます

ライブデモ：http://jsfiddle.net/GPDBs/1/

HTML：

<div id="search"> 
    Search 
</div> 
<div id="ads"> 
    Ads 
</div> 
<div id="product"> 
    Hot Product 
</div>

CSS：

#search{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:50%; 
    bottom:40%; 
    background-color:blue; 
} 
#product{ 
    position:absolute; 
    top:0px; 
    right:0px; 
    left:50%; 
    bottom:0px; 
    background-color:green; 
} 

#ads{ 
    position:absolute; 
    top:60%; 
    left:0px; 
    right:50%; 
    bottom:0; 
    background-color:red; 
}

私は、これは:-)

に役立ちます願っていますが、これを行うことができ、フルサイズのページと柔軟なレイアウト

出典

2012-01-10 23:16:45 Qorbani

ありがとう、私はそれを使用できませんでした:) –

私は何か助けることができますか？あなたは絶対的な位置付けでそれを持っていたいですか？もしあなたがもっと説明できるなら、私はあなたを助けることができます:) – Qorbani

それとも、この試みることができる：http://jsfiddle.net/eRJH3/

出典

2012-01-10 23:16:57 Matmarbon

絶対位置なし - > http://jsfiddle.net/eRJH3/15/ – Piotr

これは作るために、かなりシンプルなデザインですが、これをチェックアウト：

HTML

<div class="container"> 
    <div class="search"> 
     search 
    </div> 
    <div class="products"> 
     products 
    </div> 
    <div class="ads"> 
     ads 
    </div> 
</div>

CSS

.container { 
    width:960px; 
    margin:0 auto; 
} 

.search, .ads, .products { 
    background-color:#aaa; 
    margin:0 0 5px 5px; 
} 

.search, .ads { 
    width:400px; 
    float:left; 
} 

.search { 
    height:200px; 
} 

.ads { 
    height:100px; 
} 

.products { 
    width:550px; 
    height:305px; 
    float:right; 
}

デモhttp://jsfiddle.net/andresilich/xxbU5/show/

出典

2012-01-10 23:31:02

HTML/CSSで3ボックスレイアウトを実装する

答えて

関連する問題