CSS/HTML 2x2グリッドの問題

Question

この質問は前と同じように出てきましたが、私は見て回っており、他の人にはこれを見つけることができません。

divxの4x4グリッドは、HTMLではなく、divのうちの1つを使用して画像を作成することができます（右上）。そのdiv内に<p>Some text</p>と入力するとdivの左下に移動し、下の2つは移動したテキストdivの下に配置されます。

私は高さを固定してみましたが、何も変わらないようにしましたが、divはちょうど上に移動しましたが、他の部分はそのまま残りました。

CSS：

/* Page Content */ 

.container 
    {width: 910px; 
    height: auto; 
    margin: 0px auto; 
    padding-top: 35px; 
    position: relative;} 

/* Home Page Content */ 

.gridblock, .gridblock2, .gridtext 
    {width: 450px; 
    height: 200px; 
    padding: 0px; 
    position: relative; 
    display: inline-block;} 

.gridblock 
    {margin: 2px;} 

.gridblock2, .gridtext 
    {margin: 3px, 0px, 3px, 0px;} 

.gridtext 
    {width: 450px; 
    height: 200px; 
    position: relative; 
    background-color: #f9f9f9;} 

はHTML：

<div class="container"> 
    <div class="gridblock"> 
     <img src="images/homegrid1.jpg" alt="3345 Mastering"> 
    </div> 
    <div class="gridtext"> 
     <p>Some Text</p>  
    </div> 
    <div class="gridblock"> 
     <img src="images/homegrid2.jpg" alt="3345 Mastering"> 
    </div> 
    <div class="gridblock2"> 
     <img src="images/homegrid3.jpg" alt="3345 Mastering"> 
    </div> 
    <ul class="footer"> 
    </ul> 

これはオンラインデモです：http://jsfiddle.net/saidbakr/2LCwg/

Answer 1

私はあなたの質問の権利を取得していた場合、問題は財産であると思われますdisplay:inline-block。

は、あなたの.gridtextクラスにvertical-align:topを追加します。

.gridtext { 
    vertical-align:top; 
} 

それはそれを修正する必要があります。ここには働いてfiddleです。

hereは、表示に関する興味深い記事：インラインブロックプロパティです。

また、あなたは（あなたのdivは、その後、デフォルトでは、ブロックとして表示される）display:inline-blockプロパティを削除し、それらを与えることができる代わりに浮い：

.gridblock, .gridblock2, .gridtext { 
    width: 450px; 
    height: 200px; 
    padding: 0; 
    position: relative; 
    float:left; 
} 

をまた、あなたはイメージで作業しているとして、あなたは可能性上記のクラスにoverflow:hiddenを追加して、それらの画像がそのコンテナから拡張されず、グリッドが崩れないようにします。

.gridblock, .gridblock2 { 
    overflow:hidden; 
}