html - 内联 block div 不占用百分比宽度内容的宽度

Question

我想要实现的是 <div class="second">采用其内容的宽度，但如您所见，其子项的宽度是百分比 - 这就是它不起作用的原因。当我为 child 分配固定宽度(如 200 像素)时，它会正常工作。让我在这里粘贴代码:

.first {
  width: 100%;
  text-align: center;
}

.second {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.third {
  width: 20%;
  display: block;
  float: left;
}

img {
  width: 100%;
  display: block;
}

<div class="first">
  <div class="second">
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
    <div class="third">
      <img src="http://via.placeholder.com/640x360">
    </div>
  </div>
</div>

这是笔:https://codepen.io/anon/pen/MRmpYY

尝试将这支笔中的 20% 更改为 200px，您就会明白我要做什么。

Answer 1

使用下面的 CSS 实现预期的结果。

    .first { width: 100%; text-align: center; }
    .second {display: inline-block; width: auto; vertical-align: middle; }
    .third { width: 30%; display: inline-block; }
    img {width: 100%; display: block; }

我在“.third”类中所做的更改是:

1. Removed the "float: left" 
2. Changed "display: block" to "display: inline-block"