Question

我正在创建一个水平内容滑块，并且需要在滑块div内的一行中放置任意数量的同等大小的元素，因此我可以前后移动滑块div并一次显示一个元素页。这些元素可以是任何东西：div，imgs等等。

目前我正在浮动所有元素，并且为了防止它们掉到下一行，使用javascript来总结页面加载时所有元素的宽度并手动修复滑块的宽度以便适合所有这些。

当然我不想这样做。我看过CSS Flexible Box模型，看起来它可以做我需要的东西，但它不常出现在W3C规范之外，我不确定它是多么受支持。有没有人有使用它的经验？除此之外，还有其他任何非javascript方法可以并排排列一堆div并让父母横向扩展以适应吗？

Answer 1

Flexbox尚未真正标准化或广泛支持，尚未使用。它在包括IE10在内的较新浏览器中得到支持，但它可能需要很长时间才能成为您的基准。

有一些方法可以解决它。例如，您可以使用white-space: nowrap使内联子项不会下降到下一行，并与float: left结合使父项收缩包装其子宽度。然后，如果您希望子项成为可堆叠块，则可以使用表或内联块：

#slider { white-space: nowrap; float: left; border: dotted blue 1px;}
#slider .box { display: inline-block; width: 100px; border: dotted red 1px; }

<div id="slider">
    <span class="box">foo</span
   ><span class="box">bar</span
   ><span class="box">bof</span
   ><span class="box">zot</span
   >...
</div>

（IE7中的<span>需要使用inline-block，而>的奇怪位置是为了防止这些框之间出现不需要的空格。）

Answer 2

正如您可能已经看到的，每个浏览器都可能以不同的方式呈现内容，但如果您将样式display:inline;应用于滑块中的元素，并将width:auto;应用于容器元素，则它们不应该换行。

连续几个div，自动父宽度

2 个答案: