CSS/HTML的2x2格問題

Question

這個問題已經提出了類似之前，但我環顧四周，找不到這事會發生在任何人。

我可以做的div 4x4的方格一起使用的HTML圖片，但在申報單的一個我想在文本（右上）。當我在該div內輸入<p>Some text</p>時，它會在div下方向左和底部兩個仍然對齊，並在移動的文本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。

添加vertical-align:top您.gridtext類：

.gridtext { 
    vertical-align:top; 
} 

應該修復它。這是一個工作fiddle。

而且here的有關顯示一個有趣的文章：inline-block的財產。此外

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

，因爲你是處理圖像，你可以：

或者，你可以刪除display:inline-block物業（你的div會那麼，在默認情況下，顯示爲塊），讓他們漂浮代替將overflow:hidden添加到上述類中，以確保這些圖像不會從其容器中擴展出來，並將網格搞亂。

.gridblock, .gridblock2 { 
    overflow:hidden; 
}