我有以下代码:



div {
       box-sizing: border-box;
       border-style: solid;
}
div.table {
       display: table;
}
div.row {
       display: table-row;
}
div.cell {
       display: table-cell;
}
div.logo {
       width: 200px;
       height: 200px;
       border-color: red;
}

<div class="table">
    <div class="row">
       <div class="cell">
           <div class="logo"></div>
       </div>
       <div class="cell">
           Content
       </div>
    </div>
</div>





第二个单元格的内容与第一个单元格的底部对齐,并显示在该单元格的最底部。当两个单元格都填充文本时,两个单元格中的内容都将浮在顶部。

如何使第二个单元格的内容位于其单元格的顶部?

这个问题一定很愚蠢,但是我绝对是CSS的初学者,只是不知道如何解决这个问题。

最佳答案

使用vertical-align:top垂直对齐表格单元格。
div通常在其默认样式表定义中包含vertical-align:baseline,这将解释您看到的显示。请注意,默认情况下实际表单元格(tdth元素)具有vertical-align:middle



div {
       box-sizing: border-box;
       border-style: solid;
}
div.table {
       display: table;
}
div.row {
       display: table-row;
}
div.cell {
       display: table-cell;
       vertical-align:top;
}
div.logo {
       width: 200px;
       height: 200px;
       border-color: red;
}

<div class="table">
    <div class="row">
       <div class="cell">
           <div class="logo"></div>
       </div>
       <div class="cell">
           Content
       </div>
    </div>
</div>

关于html - 带有表格显示的div:对齐问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39869612/

10-09 06:29
查看更多