我有以下代码:
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
,这将解释您看到的显示。请注意,默认情况下实际表单元格(td
和th
元素)具有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/