使用table-cell时,<div>填充自动增加

时间:2016-10-21 05:49:18

标签: html css

我使用table,table-cell创建了两个表。但是当我在第一个单元格上增加填充时,它也会增加第二个单元格上的填充,反之亦然。是什么原因以及如何解决它。

.desc-one{
  width: 100%;
  margin-bottom: 20px;
  display: table;
}

.desc-one-one{
  width: 350px;
  background-color: #ffffff;
  display: table-cell;
  padding-right: 10px;
  border-radius: 10px;
  vertical-align: top;
  box-shadow: 0px 2px 1px #888888;
}

.quick-heading{
  font-size: 20px;
  font-family: opensans-semibold;
  color: #2199e8;
  padding-left: 10px;
  padding-top: 5px;
}
.row-two-one{
  max-width: 1200px;
  border-radius: 10px;
  background-color: #ffffff;

  box-shadow: 0px 2px 1px #888888;
}
.desc-one-two{
  display: table-cell;
  padding-left: 20px;
}
.recent-heading{
  color: #2199e8;
  font-size: 20px;
  font-family: opensans-semibold;
}
<div class="desc-one">
  <div class="desc-one-one">
    <h1 class="quick-heading">
      Quick links
    </h1>
  </div>
  <div class="desc-one-two">     
    <div class="row-two-one">
      <h1 class="recent-heading open-semibold">
        Low Stock Distributors
      </h1>
    </div>
  </div>
</div>

在CSS代码中:如果我增加第一个表格单元格标题的填充顶部/填充底部,则第二个单元格元素也采用第一个单元格中提到的填充(反之亦然)

2 个答案:

答案 0 :(得分:0)

我已经尝试过你的代码,发现只有第一个标题才能获得填充顶部。也许你的页面上有另外一些代码添加了这个额外的填充。

&#13;
&#13;
.desc-one {
  width: 100%;
  margin-bottom: 20px;
  display: table;
}
.desc-one-one {
  width: 350px;
  background-color: #ffffff;
  display: table-cell;
  padding-right: 10px;
  border-radius: 10px;
  vertical-align: top;
  box-shadow: 0px 2px 1px #888888;
}
.quick-heading {
  font-size: 20px;
  font-family: opensans-semibold;
  color: #2199e8;
  padding-left: 10px;
  padding-top: 100px;
}
.row-two-one {
  max-width: 1200px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0px 2px 1px #888888;
}
.desc-one-two {
  display: table-cell;
  padding-left: 20px;
}
.recent-heading {
  color: #2199e8;
  font-size: 20px;
  font-family: opensans-semibold;
}
&#13;
<div class="desc-one">
  <div class="desc-one-one">
    <h1 class="quick-heading">
                    Quick links
                </h1>
  </div>
  <div class="desc-one-two">
    <div class="row-two-one">
      <h1 class="recent-heading open-semibold">
                      Low Stock Distributors
                    </h1>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你的代码工作得很好,正如其他答案所说..

但是,在一条评论中,您注意到如果您从第一个单元格的样式中删除vertical-align:top,它的工作方式就如您所述。
那么为什么你首先在那里拥有这个房产?它将此事混淆给想要回答的人。

答案是,如果您未指定任何vertical-align属性,则默认为“baseline”。这意味着两个单元格的内容彼此对齐,位于每个单元格的第一行文本的底部。这就是表格单元格的行为方式;他们一起工作。

因此,解决方案是将vertical-align:top放入,这会导致单元格将其内容对齐到顶部。