带有“空格: 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/ (如果问题没有立即出现，请更改文本的长度)。
我知道我可以用一个表来解决这个问题，可能在左边的子表上有一个浮动，右边有一个“溢出:隐藏”，但是我看不出为什么这个不应该工作。
有人能提供一些见解吗？我很想了解盒子模型中是什么导致了这种行为。谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-03-02 11:27:31
我同意@hashem，这是预期的行为。通过对父元素使用white-space: nowrap;，您已经折叠了inline(-block)元素之间的空格。white-space对待子元素，而不是元素本身。
好吧，如果你还需要一个补丁，你可以添加width到第二个孩子，使它适合在container内。
小提琴
例如：
.child2
{
width: 70%;
}Stack Overflow用户
发布于 2014-03-02 13:51:23
如果您愿意使用柔性盒(盒子)，您可以这样做：http://jsfiddle.net/7e5TU/6/
HTML
<div id="container">
<div class="child1">
child 1
</div><div class="child2">
child 2 text that might be long enough to wrap,
but still exceed the parent
</div>
</div>CSS
#container {
width: 200px;
background: yellow;
border: 1px solid brown;
padding: 5px;
display: flex;
flex-direction: row
}
.child1, .child2 {
display: block;
border: 1px solid red;
vertical-align: top;
}
.child1 {
min-width: 50px;
}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
复制相关文章
相似问题
腾讯云开发者
