Question

我是css的新手，我被困了

我有一个包含3个imgs的父div。当我缩小imgs时，parrent div保持原始大小。它的收缩会随着imgs而缩小。如何确保div元素与img缩小？因为我在最后一次img之后有很多额外的空间。

我尝试了：block，inline-block，内联选择器。

我希望你能帮助我。谢谢你的时间。

    <div class="logos">
        <div class="dealer">Ekris</div>
        <img src="assets/img/bmw-logo.png" alt="" class="bmw-logo">
        <img src="assets/img/m-logo.png" alt="" class="m-logo">
        <img src="assets/img/i-logo.png" alt="" class="i-logo">
    </div>


div.logos  {
display: block;
background: blue;
position: absolute;
top: 0;
right: 0;
}

.dealer {
display: inline-block;
font-size: 1.3em;
font-family: Arial, serif;
font-weight: bold;
}

img {
width: 20%;
height: 20%;
}

Answer 1

我认为这里的问题是了解发生了什么。因为您要指定图像宽度的百分比，所以该百分比是父元素的百分比，而不是自然img大小的百分比。

要解决此问题，请使用图像上的像素宽度和父div中的空间消失。否则，如果你想填补空间，那么使用最多100％的百分比 - 例如。 5 x图像，每个20％宽度。另外，请考虑文本元素占用的宽度。

Answer 2

问题是您正在设置图像的宽度，但这些百分比是根据父级计算的。因此，如果您将图像设置为父级的15％，那么它们只占15％。例如，假设div是300px，300的15％是45.你有三张图像。 3 * 45 = 135.然后，你有另一个未指定宽度的div，占用更多的空间，但只有它的文本。让我们说，对于一个简短的名称，就像你一样，它只需要15px。所以现在你有135 + 15 = 150.但是你的div是300，所以这会留下150px的未填充空间。

目前尚不清楚你在这里想要发生什么，但是，如果你想设置你的div来占用同等数量的父母，你可以将它平分。如果你没有在名称div上设置一个宽度，这有点赌博，但为了论证，让我们说你希望这四个项目占用相同的宽度：100％/ 4 = 25％。< / p>

我还在div周围添加了边框，这样你就可以看到发生了什么，并留下40％的注释，这样你就可以取消注释，以便了解发生了什么。

因为没有什么是容易的，因为图像是内联的，因为字体大小，它们会有一些默认的间距。在示例中，我将父级的字体大小设置为0以将其作为未知数量删除，然后在实际具有文本的div上设置字体大小。

同样，这取决于你究竟在寻找什么，但了解正在发生的事情可能会帮助你弄清楚如果不是你想到的那样的话，如何实现其他目标。

https://jsfiddle.net/7p479cfq/1/

* {
  box-sizing: border-box;
}

div.logos  {
  display: block;
  background: blue;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0;
  /* width: 40%; */
}

.dealer {
  display: inline-block;
  font-size: 1.3em;
  font-family: Arial, serif;
  font-weight: bold;
  width: 25%;
  font-size: 14px;
  border: 1px solid red;
}

img {   
  width: 25%;
  border: 1px solid red;
}

Answer 3

我在Chrome中对此进行了测试。当我从WordDelimiterFilter删除width: 20%;时，额外的空间就消失了。
我不确定为什么会这么开心。我希望这能解决你的问题

在一个parrent div收缩imgs。 parrent div不会因imgs而缩小

3 个答案: