對齊表格中的元素

Question

我有一個3列的表格，每個<td>內部有3個<div>（標題，圖片和描述）垂直位置（一個在另一個下面）。

我想要水平對齊不同單元格中的所有圖像，但根據標題long（1或2行，甚至3），圖像將向下並且不會與其餘部分完全對齊圖片。

我嘗試過幾種組合"vertical-align","display:flex;"，甚至"width"或"height"，但我還沒有找到解決方案。

有沒有辦法實現它？

這是方案：

<table> 
    <tr> 
     <td> 
      <div class="title"> ... </div>  
      <div class="image"> ... </div> 
      <div class="description"> ... </div> 
     </td> 
    </tr> 
</table> 

Answer 1

我不知道它是否可以給你，但你可以使用jQuery實現這一目標，像這樣（jsFiddle）：

HTML

<table> 
<tbody> 
    <tr> 
     <td> 
      <div class="title">title1<br/>test<br/>test test</div> 
      <div class="img"><img src="" /></div> 
      <div class="descr">description</div> 
     </td> 
     <td> 
      <div class="title">title2<br/>test</div> 
      <div class="img"><img src="" /></div> 
      <div class="descr">description</div> 
     </td> 
     <td> 
      <div class="title">title3</div> 
      <div class="img"><img src="" /></div> 
      <div class="descr">description</div> 
     </td> 
    </tr>   
</tbody> 
</table> 

CSS

table { 
width: 100%; 
table-layout: fixed; 
border-collapse: collapse; 
} 

td { 
border: 1px solid #ccc; 
} 

jQuery的

var heightAr = []; 
var titleDiv = $('div.title'); 
titleDiv.each(function() { 
    var height = $(this).css('height').replace('px', ''); 
    heightAr.push(height); 
}); 
var greatest = Math.max.apply(null, heightAr); 
titleDiv.css({'height':greatest + 'px'}); 

---

這裏是jsFiddle

Answer 2

我覺得如果要劃分一行到3周的cols，你應該使用TD，而不是所有的div像這樣：