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

问题描述 投票：3回答：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，您将了解我想要做什么。

html css block
3个回答
0
投票

使用下面的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"
0
投票

如果你只是想把你的内容集中，你为什么不试试你的display: flex div上的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并且只有一个父容器。

您也可以删除很多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>
0
投票

您的inline-block容器（second）设置了width: auto - 这意味着它的值由其内容决定。你在其中放置的浮动元素（third）也是如此：

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

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

When you specify the width

当您为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>

When you don't have an intrinsic width specified

现在删除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%为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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.