为什么将内联块元素向下推？

溢出的 CSS

Stafan

2020-03-24

以下是我的代码，我想了解为什么 #firstDiv被所有浏览器向下推。我真的很想了解以下事实的内部运作原理：为什么将其向下而不是以一种或另一种方式向上拉。（我知道如何对齐它们的顶部：））

而且我知道它的overflow：hidden是导致它的原因，但不确定为什么将div向下推。

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}

<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/。

第3678篇《为什么将内联块元素向下推？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答

猿米亚 2020.03.24

尝试添加padding:0;到主体并删除div的边距。

background-color:*any除了背景*以外添加颜色以检查差异。

小卤蛋村村 2020.03.24

问题是因为您在第二个div上应用了float：left。这会使第二个div出现在左侧，而您的第一个div下降并位于第二个div之后。如果您还在第一个div上应用float：left，您的问题将消失。

溢出：隐藏不会对您的布局造成任何问题，溢出：隐藏仅影响div的内部元素，与外部的其他元素无关。

村村 2020.03.24

vertical-alignCSS中的默认值为baseline＆，此规则也适用于inline-block阅读以下http://www.brunildo.org/test/inline-block.html

写vertical-align:top在你的inline-blockDIV。