Question

我有一个使用表格单元格的布局。我知道，使用表格已经过时了，但是我需要它来使这一行使每一行具有相同的高度而不使用其高度的绝对值

我需要.wrapper div，才能在firefox中正确显示.infobox。在此之前，我将.infobox设置为100％高度（位置绝对），因为育儿td - 元素具有position:relative，因此在chrome上工作正常。

我希望将悬停效果应用于整个表格单元格，但我很想知道如何。我只想对高度和宽度使用相对值（如em或％），以使布局排序为响应/流畅。

编辑：好的，使用@ OneTrickPony的想法，我尝试将它们包装在另一个“table-row”-div中。那么我怎样才能使两个“table-cell”-divs具有相同的高度，vertical-align: middle但没有指定“table-row”-div的绝对高度？

Answer 1

还有另一种选择，但它是否适合您的项目取决于您希望支持哪些浏览器。

http://caniuse.com/#search=flexbox

我已经简化了你的标记并完全删除了表格。

<div id="pictures">
    <article class="entry picture">
        <div class="entry picture">
            <img class="picture" src="./images/150x150.jpg" width="150" height="150"></img>
        </div>
        <div class="entry picture infobox">
            <a href="#" class="entry">
                <h3 class="entry picture headline">contents_0 alpha headline</h3>
                <div class="view picture">
                    <span class="comments_amount">5</span>
                    <span class="articlenk info">Bild zeigen</span>
                </div>
            </a>
        </div>
    </article>

    <article class="entry picture"><div class="picture wrapper">
        <div class="entry picture">
            <img class="picture" src="./images/150x71.jpg" width="150" height="71"></img>
        </div>
        <div class="entry picture infobox">
            <a href="#" class="entry">
                <h3 class="entry picture headline">contents_0 beta headline</h3>
                <div class="view picture">
                    <span class="comments_amount">5</span>
                    <span class="pictures info">Bild zeigen</span>
                </div>
            </a>
        </div></div>
    </article>
</table>

这个CSS非常简单，但我没有留下前缀：

div#pictures {
    display: flex;
    flex-flow: row wrap;
}

article {
    flex: 1 1 50%;
    box-sizing: border-box; /* optional */
    position: relative;
}

div.infobox {
    position: absolute;
    bottom: 0;
}

http://jsfiddle.net/NDMTH/1/

图/ figcaption可能是比文章更合适的选择。

Answer 2

好的，所以我认为实际上有无法将两个（或更多）div的高度设置为相等的值而不定义绝对值。作为一种解决方法，我编写了这个小脚本，它完成了这项工作：

$(window).load(function() { /* Important because the script has to "wait" until the content (images) has been loaded */
  $('.picture-row').each(function() {
    var rowHeight = 0;
    $(this).children('.picture.item').each(function() {
      if ($(this).outerHeight() > rowHeight) {
        rowHeight = $(this).outerHeight();
      }
    });
    $(this).children('.picture.item').each(function() {
      $(this).height(rowHeight + 'px');
    });
  });
});

如何在表格单元格中创建一个div“height：100％”

2 个答案: