divの複数の行を作成

Question

4つのdiv要素からなる2x2セットアップを作成したいと思います。今までの私のテストではfiddleを参照してください。inline-blockを私のディスプレイに使用してください。私は "div 3"と "div 4"をそれぞれ1と2の直下に持っていたいと思います。浮動小数点なしでこれを行う方法はありますか？

HTML：

<div class = "blocks"> 
    div 1 
</div> 

<div class = "blocks"> 
    div 2 
</div> 

<div class = "blocks"> 
    div 3 
</div> 

<div class = "blocks"> 
    div 4 
</div> 

CSS：

.blocks { 
    display: inline-block; 
    border: solid 1px red; 
    width: 100px; 
} 

Answer 1

がコンテナのdivにブロックを入れて、それを一定の幅を与えます。このよう

.wrap{ 
    width:210px; 
} 

<div class='wrap'> 
    <div class = "blocks">div 1</div> 
    <div class = "blocks">div 2</div> 
    <div class = "blocks">div 3</div> 
    <div class = "blocks">div 4</div> 
</div> 

Fiddle

Answer 2

http://jsfiddle.net/QXqEG/7/

は

？

<div style="width: 210px;"> 
    <div class = "blocks"> 
    div 1 
</div> 

<div class = "blocks"> 
    div 2 
</div> 

<div class = "blocks"> 
    div 3 
</div> 

<div class = "blocks"> 
    div 4 
</div> 
</div> 

Answer 3

divは固定幅であるとします。要素を含む要素に単純にラップし、その要素の幅を制限して、1つの行に2つしか収まらないようにします。これは、3つの幅、または4つの幅に適合するように簡単に変更することができます。

ボックスは100PXであると仮定してJSFiddleです。

http://jsfiddle.net/QXqEG/4/

CSS：

.container { width: 210px; } 

HTML：

<div class="container"> 
<div class = "blocks"> 
    div 1 
</div> 

<div class = "blocks"> 
    div 2 
</div> 

<div class = "blocks"> 
    div 3 
</div> 

<div class = "blocks"> 
    div 4 
</div> 
</div><!-- end container --> 

Answer 4

あなたが欲しい2x2のdiv要素が含まれます<div>を作成することができます。このよう

：

HTML

<div id="column"> 
    <div class = "blocks"> 
    div 1 
    </div> 

    <div class = "blocks"> 
    div 2 
    </div> 

    <div class = "blocks"> 
    div 3 
    </div> 

    <div class = "blocks"> 
    div 4 
    </div> 
</div> 

CSS

#column { 
    position: absolute; 
    width: 210px; height: 100%; 
    border: 1px solid #000 
} 

このjsFiddle

Answer 5

は、あなたがトンにしたいブロックを包む見ます彼はdivと同じ行と多分幅で遊ぶかもしれません。

Answer 6

これを行うにはたくさんの方法があります。 1つの方法は、div 2とdiv 3の間に<br />タグを単に広告することです。もう1つは、すべての行を新しい<div>の中に入れ子にすることです。それは本当にあなたがやろうとしていることにかかっています。

<div id= "row1"> 
    <div class = "blocks"> 
     div 1 
    </div> 

    <div class = "blocks"> 
     div 2 
    </div> 
</div> 

<div id= "row2"> 
    <div class = "blocks"> 
     div 3 
    </div> 

    <div class = "blocks"> 
     div 4 
    </div> 
</div>