如何使表格单元格内的div“height：100％” [英] How to make a div inside a table cell "height: 100%"

问题描述

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

I have a layout using table cells. I know, using tables is quite out-dated, but I needed it for this one to make each row the same height without using absolute values for their height

请参阅这个小提示或此草稿。

我需要 .wrapper div，以便在Firefox中正确显示 .infobox 。在此之前，我将 .infobox 设置为100％高度（位置绝对），在Chrome上工作良好，因为父母 td -element has position：relative 。

I needed the .wrapper div, to display the .infobox correctly in firefox. Before that, I had the .infobox set as 100% height (with position absolute) which worked fine on chrome, since the parenting td-element had position:relative.

我想将悬停效果应用于整个表格细胞，但我绝望想出，如何。我只想对高度和宽度使用相对值（如em或％），使布局按照响应/流畅排序。

I want the hover-effect to be applied to the whole table cell but I'm desperate to figure out, how. I only want to use relative values (like em or %) for height and width, to make the layout sort of responsive/fluid.

编辑： Ok，using @ OneTrickPony的想法，我试着将它们包装在另一个表行-div。那么我现在如何使两个table-cell-divs具有相同的高度，类型 vertical-align：middle ，但没有 table-row的绝对高度-div？

Ok, using @OneTrickPony's idea, I tried wrapping them around in another "table-row"-div. So how can I now make both "table-cell"-divs the same height, with kind of vertical-align: middlebut without specifying an absolute height for "table-row"-div?

推荐答案

还有另一种选择，您的项目取决于您要支持的浏览器。

There is another option, but whether or not it is a good fit for your project depends on which browsers you want to support.

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

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

I've simplified your markup a bit and completely removed the table.

<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非常简单，但我已经删除了前缀：

The CSS for this is very simple, but I've left off the prefixes:

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

Figure/figcaption would probably be a more appropriate choice here than article.

这篇关于如何使表格单元格内的div“height：100％”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！