css - CSS ポジショニング - ポジショニングの最良の方法

Question

ポジショニングはどうするのがベスト？フロート、相対、絶対？

次のようなものを配置したいとしましょう：

このようなものをどのように位置付けますか?また、それを行うための最良の方法は何ですか? フロート、相対、絶対？

Answer 1

が必要な場合はfluid layout、 を使用しますfloats。

要素を配置relative/absoluteすると、必要に応じて表示されinline、height/widthになりnon-fluidます。

Answer 2

コンテナとして機能する div を作成する必要があります

次に、右側に 1 つ、左側に 2 つの div をさらに 3 つ作成します。

参照用に jSfiddle ファイルを作成しました。すばやく作成したもの

http://jsfiddle.net/wSp7F/

それはすべて、どのタイプのレイアウトを使用するかによって異なります。レスポンシブ、流動的、または固定。

HTML

<div id="container">
<div id="rightside">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="leftside">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

<div class="leftside">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

</div>​

CSS

#container {width:500px;position:relative;overflow:Hidden;outline:1px solid red}

.leftside {float:left;width:225px;margin:0 0 5px 0}
#rightside {float:right;width:200px}

.leftside,#rightside {outline:1px solid black;padding:5px}
​

Answer 3

最適な方法は 1 つではありませんが、私が行う方法は次のとおりです。

http://jsfiddle.net/Wuj35/

HTML

<div id="wrapper">
    <div id="div3">div 3</div> 
    <div id="div1">div 1</div>
    <div id="div2">div 2</div>
</div>

CSS

#wrapper{
    width:450px;
}

#div1,
#div2,
#div3{
    float:left;
    margin:1em;
    padding:1em;
    border:5px solid #000;
    border-radius:8px;
}

#div1, 
#div2{
    width:150px;
    height:75px;
}

#div2{
    clear:left;
}

#div3{
    float:right;
    width:150px;
    height:225px;
}