对齐表格中的元素

Question

我有一个包含3列的表，每个<td>内有3 <div>（标题，图像和描述）在垂直位置（一个在另一个下面）。

我想水平对齐不同单元格中的所有图像，但根据标题长（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

我认为如果你想将一行划分为3个cols，你应该使用td而不是像这样的所有div：

Answer 2

我不知道你是否对它好，但你可以通过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