3

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

请参阅此小提琴或此草稿。

我需要.wrapperdiv，才能.infobox在 Firefox 中正确显示。在此之前，我将.infobox设置为 100% 高度（具有绝对位置），这在 chrome 上运行良好，因为 parentingtd元素具有position:relative.

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

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

4

2 回答 2

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 在这里可能是比文章更合适的选择。

于 2013-01-25T13:47:53.693 回答
0

好的，所以我认为实际上没有办法在不定义绝对值的情况下将两个（或更多）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');
    });
  });
});
于 2013-01-28T08:45:00.157 回答