css - 两个内联 block div 中的 h1 和 p 元素有问题

Question

我在几个内联阻塞 div 中遇到了 h1 和 p 元素的问题。

代码如下:

#map-canvas {
  width:    69%;
  height:   1000px;
  display: inline-block;
}
#filter-manager{
  display: inline-block;
  width: 30%;
  height: 1000px;
  background-color: #000000;
  margin: 0;
  padding: 0;
}
#filter-manager h1{
  font-size: 20px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding: 0;
  display: block;
}

<div id="filter-manager">
  <h1>Filtri</h1>
</div><!-- #filter-manager -->
<div id="map-canvas"></div><!-- #map-canvas -->

div 保持其内联状态，但当我放置 h1 或 p 元素时，#filter-manager 位于底部。如果我不在里面放任何东西，div 就会完美对齐。

为什么 h1 和 p 元素的行为是这样的？

Answer 1

在这种情况下，您有 2 个解决方案。首先是添加这个:

#filter-manager {
        float: left;
}

其次是制作 h1 table :

#filter-manager h1 {
    display: table;
}