CSS/HTML 2x2 Grid Issue

Question

Questa domanda è già emersa in precedenza, ma mi sono guardato attorno e non riesco a trovare ciò che accade a nessun altro.

Posso creare una griglia 4x4 di div insieme alle immagini utilizzando nell'HTML ma una delle div in cui voglio inserire il testo (in alto a destra). Quando inserisco <p>Some text</p> all'interno di quel div, esso va sotto il div a sinistra e il secondo in basso è ancora allineato e sotto il div di testo spostato.

Ho provato a correggere l'altezza ma non è cambiato nulla, il div è salito ma gli altri sono rimasti dov'erano.

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> 

Si tratta di una demo online: http://jsfiddle.net/saidbakr/2LCwg/

Answer 1

Se sto ottenendo la tua domanda giusta, il problema sembra essere con la proprietà display:inline-block.

Aggiungi vertical-align:top alla classe .gridtext:

.gridtext { 
    vertical-align:top; 
} 

Dovrebbe risolvere il problema. Ecco un lavoro fiddle.

E here è un articolo interessante sul display: proprietà di blocco in linea.

alternativa, è possibile rimuovere la proprietà display:inline-block (i tuoi div sarebbero quindi, per impostazione predefinita, vengono visualizzati come blocco) e dare loro galleggianti invece:

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

Inoltre, come si lavora con le immagini, si potrebbe aggiungi overflow:hidden alle classi precedenti, per assicurarti che quelle immagini non si espandano dal suo contenitore e rovinino la griglia.

.gridblock, .gridblock2 { 
    overflow:hidden; 
}