Изображение ячейки таблицы и выравнивание текста

Question

У меня есть расположение трех столбцов, где иногда я хочу иметь текст в одном столбце, смежном с изображением в другом столбце. Моя проблема заключается в том, что когда я вставляю изображение в один из столбцов, текст в соседнем столбце (столбцах) позиционирует себя рядом с нижней частью изображения в соседнем столбце, а не в верхней части столбца, как и следовало ожидать.

Моя основная структура:

<div class="fwcol"> 
    <div class="col"> 
     <div class="ttl"> 
     <img src="images/placeholder.png" width="571" height="540"> 
     <p>Bla Bla Bla </p> 
     </div><!--ttl--> 
     <div class="otr">Column 2 Content 
     </div><!--otr--> 
    </div><!--col--> 
</div><!--fwcol--> 

CSS:

.fwcol { 
    float: left; 
    width: 966px; 
}   
.ttl { 
    display: table-cell; 
    padding: 20px; 
    width: 571px; 
    background: #FFF; 
} 
.col { 
    width: 966px; 
    display: table; 
    table-layout: fixed; 
    border-collapse: separate; 
    border-spacing: 20px; 
} 

Answer 1

Вы не использовал вертикальное выравнивание в DIV, где вы претендуете таблицы-клетку:

.ttl { 
    display: table-cell; 
    vertical-align: top; 
    padding: 20px; 
    width: 571px; 
    background: #FFF; 
} 

Кроме того, в самому себе нужно использовать вертикальный выровнять:

.ttl img { 
    display: inline-block; 
    vertical-align: top; 
} 

Answer 2

Он делает это потому, что .ttl «s display устанавливается в table-cell. Вы можете добавить vertical-align: top к элементу для того, чтобы исправить это поведение:

.ttl { 
    display: table-cell; 
    vertical-align: top; 
    padding:20px; 
    width: 571px; 
    background: #FFF; 
}