Question

我想让几个项目无限地水平堆叠（在一行中），而不设置其父容器的宽度。我完全清楚将容器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>

Answer 1

  display: inline;
  white-space: nowrap;
  float: none;

并在您需要的父元素上

  overflow:hidden;

Answer 2

它不一定是一个强大的解决方案，但如果您可以在每个内部div中获得300px的内容，则可以删除float和width属性。也许包括一个1x300透明图像，并确保你没有太多的文字？也许

div.dummycontent {float:left; width:200px; background-color:Blue; }
<div class="dummycontent">&nbsp;</div>

或者，如果没有设置宽度的原因主要是在运行时不知道大小需要的大小，可以用JavaScript计算，然后设置它？

防止浮动包装而不设置父宽度

2 个答案: