<分区>
标签 javascript jquery html css
我有一个容器，里面有一些 div。我想并排排列 divs。如果它们不适合容器，仍然将它们并排放置，但要放在容器外面。我尝试使用 white-space: nowrap。这将它们从祖父容器和父容器中分离出来。以下是 nowrap 问题的示例。
.container{
border: dashed;
width: 25%;
display: inline-block;
white-space:nowrap;
}
.row {
border: dotted red;
}
.block {
display: inline-block;
border: dotted green;
}<div class="container">
<div class='row'>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
<div class="block">
<p>
Stuff
</p>
</div>
</div>
</div>黑色边框是窗口，红色边框是父级div，绿色边框代表数据 block 。
我只需要转义祖 parent div，而父 div 仍会环绕内容，即使它转义祖 parent div。
有什么建议吗？
编辑:没有一个答案对我有用。在我的示例中，我仍然无法包围 child 。
最佳答案
将display:table或display:inline-block给.row:
.container{
border: dashed;
width: 25%;
display: inline-block;
white-space:nowrap;
}
.row {
display: table; // inline-block
border: dotted red;
}
.block {
display: inline-block;
border: dotted green;
margin: 2px;
}
关于javascript - 无论容器如何，如何并排排列元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38444452/
相关文章：
javascript - 有没有办法使用相同的选项验证 html 中的 2 个选择标记？使用 JavaScript
html - 如何解决 WordPress 中的传入电子邮件错误
javascript - 如何在 Sencha Touch 2 的 View 中定义自己的函数
javascript - JQuery - 单击时切换 div 内的图像？
jquery IE Fadein 和 Fadeout 不透明度
javascript - jQuery 选择何时属性名称以？
javascript - 如何使用 python 截取给定 url 的屏幕截图