对齐表格中的元素答案

【问题标题】：Align elements in a table对齐表格中的元素
【发布时间】：2015-01-23 12:50:17
【问题描述】：

我有一个包含 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>

【问题讨论】：

我想你不能把这三个 div 分成三个（表格）行？
您可以将标题限制为几个字符并在末尾显示省略号（...）

标签： html css html-table drupal-7 alignment

【解决方案1】：

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

【讨论】：

看，问题是这是一个 Drupal 视图，因此我无法更改代码。我有我所拥有的......

【解决方案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

【讨论】：