在不设置父宽度的情况下防止浮动换行
我想让几个项目无限水平地堆叠（一行），而不设置其父容器的宽度。我完全知道将容器 div 设置为 width:1000px;将使它们堆叠，但由于各种原因我不想使用这个解决方案。还有其他选择吗？
<html>
<head>
<style type="text/css">
div {white-space:nowrap; clear:none;}
div div {width:300px; border:1px solid black; float:left; display:inline;}
</style>
</head>
<body>
<div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
</div>
</body>
</html>
I would like to have several items stack horizontally infinitely (in one row), without setting the width of their parent container. I'm fully aware that setting the container div to width:1000px; will make them stack, but for various reasons I do not want to use this solution. Are there any alternatives?
<html>
<head>
<style type="text/css">
div {white-space:nowrap; clear:none;}
div div {width:300px; border:1px solid black; float:left; display:inline;}
</style>
</head>
<body>
<div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这不一定是一个可靠的解决方案，但如果您可以在每个内部 div 中获取恰好 300px 的内容，则可以删除浮动和宽度属性。也许包含一个 1x300 透明图像，并确保没有太多文本？也许
或者如果不设置宽度的原因主要是直到运行时才知道尺寸需要是多少，也许用 JavaScript 计算，然后设置它？
It's not necessarily a robust solution, but if you can get exactly 300px of content in each of the inner divs, you could remove the float and width properties. Maybe include a 1x300 transparent image, and make sure you don't have too much text? Maybe
Or if the reasons for not setting a width are primarily along the lines of not knowing until runtime what the size will need to be, maybe calculate with JavaScript, and set it then?
在父元素上你需要
and on a parent element you'll need