行内块级div不占用百分比宽度内容的宽度

Question

行内块级div不占用百分比宽度内容的宽度

3

我想要实现的是让 <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，您将理解我试图做什么。

- Umer Javed

2

你想要什么结果？为什么你希望它们的父元素具有其内容的宽度？仅仅是为了居中吗？ - Jake

设置第三个类的最小宽度为200像素： - Rafv

是的，这是为了居中对齐的目的。@Jake - Umer Javed

@Rafv 我想让它具有响应性。所以我不能分配最小宽度。 - Umer Javed

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rohit Verma · 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. 删除了“float: left” 
2. 将"display: block"更改为"display: inline-block"

- coops · Answer 2

如果你只想让你的内容居中，为什么不尝试在你的`.second` div 上使用 `display: flex` 和 `justify-content: center` 呢？

.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并只有一个父容器。

您还可以剥离大量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>

- kukkuz · Answer 3

你的inline-block容器（second）设置了width: auto - 这意味着它的值由其内容确定。同样的论点也适用于您放置在其中的浮动元素（third）：

10.3.9 'Inline-block'，正常流中的非替换元素

如果'width'是'auto'，则使用的值是收缩到适合浮动元素的宽度。

当您指定宽度时

当您为第三个容器指定width: 200px时，第二个容器会缩小到该值。

.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容器 - 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%，并注意到它确切地使用了这个值的 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%就没有多大意义。因此，我建议您可以在第二个容器上使用这个百分比，以达到相似的效果：

将width: 40%添加到第二个容器
使用inline-flex显示方式，使得第三个容器并排放置

请参见下面的演示：

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