Question

鉴于这个基本的3列布局，

＆＃13;

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

＆＃13;

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

＆＃13;

在.center div中添加padding-top时，其他人也会显示它。如何单独向中心div添加填充顶部？

Answer 1

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

 .wrapper {
     display: table;
     width: 100%;
 }      

 .wrapper>div {
    display: table-cell;
    vertical-align:top;  // Add this line :)
 }

 .center {
    padding-top: 3em;
 }

当您在div中使用display： table-cell 时，div将垂直对齐中心...所以通过 vertical-align：top ，您将强制所有div垂直对齐顶部，然后中心div将根据需要采用填充。

Answer 2

这是因为设计的table布局。如果你绝对需要使用display: table这就是我要做的事情：

＆＃13;

.wrapper {
  display: table;
  width: 100%;
}

.wrapper>div {
  display: inline-block;
  width:  calc(100% / 3);
  background: salmon; 
}

.center {
  padding-top: 3em;
}

＆＃13;

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

＆＃13;

如果你能够使用display: flex，我会做下一个：

.wrapper {
  display:  flex; 
  width:  100%; 
  align-items:  flex-end; 
}
.wrapper > div {
  display:  flex; 
  flex-direction:  column; 
  flex: 1; 
}
.center {
  padding-top:  3em; 
}

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

2 个答案: