html - 使内联 block div 出现在下方而不是重叠

Question

HTML:

<div id="parent">
    <div class="child1">
        <img src="img/top.png"/>
    </div>
    <div class="child2">
        <img src="img/middle.png"/>
    </div>
    <div class="child3">
        <img src="img/bottom.png"/>
    </div>
</div>

CSS:

.child1{
    display: inline-block;
}
.child2{
    display: inline-block;
}
.child3{
    display: inline-block;
}

我将显示设置为内联 block ，因为我希望 div 适合它们包含的图像的大小(每个不同的大小)。但是，当我这样设置时，它们会从左到右一个接一个地出现。我希望它们堆叠在一起，其中 child2 在 child1 的正下方，child3 在 child2 的正下方。

谢谢

Answer 1

使用flexbox解决

#parent {
    display: flex;
    flex-direction: column;
    align-items: center;
}

<div id="parent">
  <div class="child1">
    <img src="http://lorempixel.com/400/200" alt="random">
  </div>
  <div class="child2">
    <img src="http://lorempixel.com/600/200" alt="random">
  </div>
  <div class="child3">
    <img src="http://lorempixel.com/400/200" alt="random">
  </div>
</div>

---

如果你真的想让 div 元素完全适合其包含的图像的大小，那么你必须删除空白或在父容器(或子 div)上设置 font-size: 0

检查这个pen