个人中心
gpt4 book ai didi

html - 奇怪{显示:table} behavior

转载 作者：太空宇宙 更新时间：2023-11-04 05:24:22 24 4
gpt4 key购买 nike

我想不通这个。当 display:table 与 display:table-cell 一起使用时，在 cell1 或 cell2 中放置一个 img 标签将强制显示内容(“This is a test”内容例如)，在另一个单元格中放置在图像下方。它是否正确？它在所有浏览器上都这样做，所以我认为这是正确的，但为什么呢？

<html>
<head>
    <title></title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            border: 2px solid #000;
            width: 100%;
            height: 100%;
        }
        .table {
            display: table;
            border-collapse: collapse;
        }
        .row {
            display: table-row;
        }
        .cell {
            display: table-cell;
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="row">
            <div id="cell1" class="cell">
                <h1>This is a test</h1>
            </div>
            <div id="cell2" class="cell">
                <img src="" />
            </div>
        </div>
    </div>
</body>
</html>

最佳答案

嗯。 vertical-align: top 在表格单元格中。

工作示例:at jsFiddle

关于html - 奇怪{显示:table} behavior，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5518709/

24 4 0
文章推荐： iphone - 媒体查询 : avoid inheritance?
文章推荐： linux - 将 Windows SSH 连接到 CentOS 7 for git
文章推荐： linux - 氮气--恢复到比例背景
文章推荐： html - 如何用html+css做这样的布局？