Question

我彼此相邻有3个元素，内容和所有内容都是相同的，但是当我为其中一个设置较大的字体大小时，那个元素就会增加。

这里是一个小提琴：http://jsfiddle.net/8eLps3f2/13

如您所见，当我在第一个元素a中输入font-size: 300%时，这意味着文本将超出宽度，第一个元素向上。

难道不适合内容吗？

那是正常的吗？

如果没有，如何修复它，以便容器随内容一起下降，不上升。

代码如下：

.container{
  width:80%;
  margin: 5% auto
}

.child{
  display:inline-block;
  width: 32%;
}

.first{
  background-color: #444
}

.second{
  background-color: #eee
}

.third{
  background-color: #aaa
}

.first a{
  font-size:200%
 }

HTML：

<div class="container">
  <div class="child first">
    <div>first</div>
    <h3>This is the 1st child</h3>
    <a>This is link for 1st child</a>
  </div> <!-- .first -->
  <div class="child second">
    <div>second</div>
    <h3>This is the 2nd child</h3>
    <a>This is link for 2nd child</a>
  </div> <!-- .second -->
  <div class="child third">
    <div>third</div>
    <h3>This is the 3rd child</h3>
    <a>This is link for 3rd child</a>
  </div> <!-- .third -->
</div> <!-- .container -->

Answer 1

因为您没有设置vertical-align属性，其默认值为baseline。

.child {
    vertical-align: top;
}

查看文档：{{3}}

为什么增加子元素字体大小时容器会升高？

1 个答案: