Question

我有一组简单的卡片显示并排图像，我需要响应屏幕宽度。所以使用简单的inline-block，我有这样的结构：

<div class="cards" id="ex1">
  <div class="card">
    <img src="http://www.clker.com/cliparts/5/b/a/7/1194986784455829849basebalm_ganson.svg.med.png" />
  </div>
  <div class="card">
    <img src="http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png" />
  </div>
</div>

使用这个CSS：

.cards {
  display: inline-block;
  border: 2px solid #808080;
  border-radius: 2px;
  padding: 10px;
  margin-bottom: 20px;
}

#ex1 .card {
  width: 35%;
  display: inline-block;
}

但令我惊讶的是，父div .cards跨越页面的宽度，好像它是display: block：

但是，如果我对.card div的宽度进行硬编码，它会按预期工作。这是一个比较两者的fiddle。

为什么inline-block不尊重不加100％的百分比？有没有办法用百分比来做到这一点？（我可以将它们都设为50％，但即使使用box-sizing: border-box，这也会导致它们垂直堆叠。）

Answer 1

.cards具有缩小到合适的宽度。这意味着它将尝试只有内容所需的宽度（假设有足够的空间）。

但是，内容的宽度百分比取决于.cards。

循环定义如下解决：

内容的百分比被视为auto

也就是说，图像的内在宽度为300px。
.cards根据内容调整大小，不再依赖于.cards

即，它变为300px + 300px = 600px宽。 ^{_{嗯，实际上稍微多一点，因为HTML中有一些空格，请参阅How to remove the space between inline-block elements?以避免它，但是请忽略它。}}
再次调整内容的大小，现在考虑百分比，这些百分比相对于上一步的.cards宽度进行了解析。

即图像变为35% * 600px = 210px宽。

Answer 2

inline-block属性占用100％的空间，同时保持inline的属性。但是，当视觉外观上的一行即将溢出时，内联属性会转到另一行。

例如：

element {
    display: inline; /* Makes the content go on the same line*/
}
element {
    display: inline-block; /* Makes the content go on the same line while not overflowing
                           and going on a different line while about to overflow*/
}
element {
    display: block; /* Makes the content go on different lines*/
}

我希望你理解我的意思。

为什么宽度为百分比的div会强制内联块为100％宽度？

2 个答案: