显示:表格布局不需要的填充行为

Question

给定这个基本的 3 列布局，

.wrapper {
  display: table;
  width: 100%;
}
.wrapper>div {
  display: table-cell;
}
.center {
  padding-top: 3em;
}

<div class="wrapper">
  <div class="left">uno</div>
  <div class="center">dos</div>
  <div class="right">tres</div>
</div>

将填充顶部添加到 .centerdiv 时，其他部分也会显示它。如何单独在中心分区添加填充顶部？

Answer 1

很简单：尝试执行以下操作：

 .wrapper {
     display: table;
     width: 100%;
 }      
 .wrapper>div {
    display: table-cell;
    vertical-align:top;  // Add this line :)
 }
 .center {
    padding-top: 3em;
 }

当您在div 中使用 display： 表格单元格时，div 将垂直对齐到中心...因此，通过执行 vertical-align：top，您将强制所有div 垂直对齐到顶部，然后中心div 将根据需要进行填充。