我有一个使用表格单元格的布局。我知道,使用表格已经过时了,但我需要它让每一行的高度都相同而不使用绝对值作为它们的高度
参见 this fiddle或 this draft .
我需要 .wrapper
div,以便在 firefox 中正确显示 .infobox
。在此之前,我将 .infobox
设置为 100% 高度(具有绝对位置),这在 chrome 上运行良好,因为父级 td
元素具有 position:relative
。
我想将悬停效果应用于整个表格单元格,但我很想知道如何操作。我只想对高度和宽度使用相对值(如 em 或 %),以使布局具有响应性/流畅性。
编辑: 好的,使用@OneTrickPony 的想法,我尝试将它们包裹在另一个“table-row”-div 中。那么我现在如何才能使两个“table-cell”-div 具有相同的高度,使用 vertical-align: middle
但没有为“table-”指定绝对高度行”-div?
最佳答案
还有另一种选择,但它是否适合您的元素取决于您要支持的浏览器。
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;
}
Figure/figcaption 在这里可能比 article 更合适。
关于html - 如何在表格单元格 "height: 100%"内创建一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14521660/