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;
}

我将显示设置为内联块，因为我希望div符合它们包含的图像的大小（每个的大小不同）。然而，当我以这种方式设置它们时，它们从左到右依次出现。我希望它们被堆叠，其中child2直接位于child1下方，child3直接位于child2下方。

由于

Answer 1

使用flexbox解决

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

选中此pen

Answer 2

像这样更新您的CSS

.child1{
    float:left;
    clear:both;
}
.child2{
   float:left;
    clear:both;
}
.child3{
    float:left;
    clear:both;
}

Answer 3

给每个孩子div width:100%并提供#parent div text-align:center

#parent {
  text-align: center;
}

#parent>div {
  width: 100%;
  display: inline-block;
}

<div id="parent">
  <div class="child1">
    <img src="http://dingo.care2.com/pictures/greenliving/uploads/2013/10/cat-with-stunning-green-eyes.jpg" />
  </div>
  <div class="child2">
    <img src="http://www.top13.net/wp-content/uploads/2015/02/cat-photography-zoran-milutinovic-Fluffy-The-King.jpg" />
  </div>
  <div class="child3">
    <img src="https://i.imgur.com/D2cqjmO.jpg" />
  </div>
</div>

使内联块div显示在下面而不是重叠

3 个答案:

使用flexbox解决