Question

我想要达到的目的是<div class="second">采用其内容的宽度，但是正如您所看到的那样，其子级的宽度是百分比-这就是为什么它不起作用的原因。当我给孩子们分配一个固定的宽度（如200px）时，它应该可以正常工作。让我在这里粘贴代码：

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

Answer 2

如果您只想使内容居中，为什么不在display: flex格上尝试justify-content: center和.second。

.first {
  width: 100%;
  text-align: center;
}

.second {
  display: flex;
  justify-content: center;
}

.third {
  width: 20%;
}

img {
  width: 100%;
}

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

或者，如果您愿意更改html，则实际上可以剥离.second，只有1个父容器。

您也可以剥离很多CSS，并获得相同的结果-

.first {
  width: 100%;
  display: flex;
  justify-content: center;
}

.third {
  width: 20%;
}

img {
  width: 100%;
}

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

编辑

以对问题的新理解进行了更新：在图像上添加了max-width，而不是在.third div上具有宽度。

.first {
  width: 100%;
  background: orange;
  display: flex;
  justify-content: center;
}

.second {
  background: purple;
  display: flex;
}

img {
  width: 100%;
  max-width: 200px;
  padding: 5px;
  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>

Answer 3

您的inline-block容器（second）设置了width: auto-这意味着其值取决于其内容。放置在其中的 floating 元素也使用相同的参数（third）

10.3.9 'Inline-block', non-replaced elements in normal flow

如果'width'为'auto'，则使用的值是浮动尺寸宽度，与浮动元素一样。

指定宽度

当您为width: 200px指定third时，second容器会缩小到该值。

.first {
  width: 100%;
  text-align: center;
}

.second {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  border: 1px solid red;
}

.third {
  width: 200px;
  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>

未指定固有宽度时

现在删除third容器的 percentage width -second的宽度现在为1280px（如果您的视口小于此宽度，则缩小到可用宽度）-展开以下全屏代码段并检查second：

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

现在将width: 20%元素切换回third，并发现它精确地该值的20％。这与相对于父元素解析百分比

的事实形成对比。

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

现在怎么办？

当父容器没有设置宽度时，设置width: 20%对我来说没有多大意义。因此，我建议的是，如果可以在second容器上使用此百分比，则可以达到相同的效果：

将width: 40%添加到second容器
使用inline-flex显示，以便将两个third容器彼此相邻放置

请参见下面的演示

.first {
  width: 100%;
  text-align: center;
  background: aliceblue;
  border: 1px solid cadetblue;
}

.second {
  display: inline-flex; /* inline container */
  width: 40%; /* <-- 20% for each image section */
  vertical-align: middle;
  border: 1px solid red;
}

.third {
  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>

内联块div不采用百分比宽度内容的宽度

3 个答案:

编辑

指定宽度

未指定固有宽度时

现在怎么办？