html - 如何在表格单元格 "height: 100%"内创建一个 div

标签 html css cell css-tables

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

参见 this fiddlethis 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;
}

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

Figure/figcaption 在这里可能比 article 更合适。

关于html - 如何在表格单元格 "height: 100%"内创建一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14521660/

相关文章:

css - 获取 100% 高度不是从顶部开始?

html - 使用相同的浏览器时,字体在本地服务器和Web服务器上的呈现方式不同

excel - Delphi 导出到 Excel - IDE 中编译代码出现错误

WPF : Filling DataGrid cell with a shape

javascript - paper-ripple 正在监听其容器外的点击事件

javascript - 在 dropbox 中更改选项时更改 div 的可见性

html - 为表格中的单元格之间的空间着色

javascript - 隐藏移动键盘,同时将光标保持在文本区域中

html - 我怎样才能使表格单元格表现得像 UL LI?

html - 输入类型 "number"在 Microsoft Edge 中未按预期工作