带有“空格: normal”的内联块div超过具有“空白:现在”的父代的宽度。
带有“空格: normal”的内联块div超过具有“空白:现在”的父代的宽度。
提问于 2014-03-02 11:08:40
我试图将几个元素放在一行中，以便它们都符合容器的宽度。为了防止他们用单词包装，我在父母中增加了“空格:现在”，并给孩子们添加了“空白:正常”，允许他们(根据需要)包装文本。
问题是，使用此配置时，大多数正确的子级有时会超过父级的宽度。
HTML：
<div id="container">
<div class="child">
child 1
</div>
<div class="child">
child 2 text that might be long enough to wrap, but still exceed the parent
</div>
</div>CSS：
#container {
white-space: nowrap;
width: 200px;
background: yellow;
border: 1px solid brown;
padding: 5px;
}
.child {
display: inline-block;
border: 2px solid red;
vertical-align: top;
white-space: normal;
}http://jsfiddle.net/7e5TU/1/ (如果问题没有立即出现，请更改文本的长度)。
我知道我可以用一个表来解决这个问题，可能在左边的子表上有一个浮动，右边有一个“溢出:隐藏”，但是我看不出为什么这个不应该工作。
有人能提供一些见解吗？我很想了解盒子模型中是什么导致了这种行为。谢谢!
Stack Overflow用户
发布于 2016-10-15 19:17:17
您可以使用CSS display:table来完成此操作。这样就不需要调整大小的详细信息。它确保元素保持在一行中，并且文本将完美地包装到父容器的宽度。
HTML
<div class='container'>
<div class='field'>
<div class='data'>
child 1
</div>
</div>
<div class='field'>
<div class='data'>
child 2 text that might be long enough to wrap, but still exceed the parent
</div>
</div>
</div>CSS
.container {
display: inline-table;
border-spacing: 4px;
background: yellow; border: 1px solid brown;
padding: 5px;
}
.field {
display: table-cell;
}
.data {
border: 2px solid red;
padding: 3px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22126789
复制相关文章
相似问题
腾讯云开发者
