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

问题描述：

我有一组显示并排图像的卡片，我需要对屏幕宽度做出响应。因此，使用简单inline-block，我有这样的结构：为什么具有百分比宽度的div强制内联块到100％宽度？

<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二的宽度vs，它按预期工作。这是一个fiddle比较两者。

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

答

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

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

圆形定义解决这样的：

的内容百分比是为auto

即处理时，图像具有其固有的宽度，这是300px。
.cards根据内容，它不再依赖于.cards

，其尺寸，变得300px + 300px = 600px宽。 ^{_{呃，实际上稍微多一点，因为你在HTML中有一些空间，请参阅How to remove the space between inline-block elements?以避免它，但让我们忽略它。}}
内容的尺寸又，现在正在百分比计，其被相对决心的.cards来自前一步骤的宽度。

也就是说，图像变成35% * 600px = 210px宽。

答

该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％宽度？

相关推荐