Question

我有一个容器元素，可能包含一个或两个兄弟孩子。当只有一个孩子时，我希望它是父母宽度的100％。当有两个孩子时，我希望每个孩子都是父母宽度的50％。（如果我有三个，我希望每个都有33％的宽度，等等。）

有没有办法用纯CSS解决方案来完成这个，或者我是否必须使用Javascript来检测元素的数量，并相应地设置它们的样式？

DOM结构可能如下所示：

<div class="container">
    <div class="element1"></div>
</div>

或者像这样：

<div class="container">
    <div class="element1"></div>
     <div class="element2"></div>
</div>

以下是实验的小提琴：http://jsfiddle.net/Mx3ae/

Answer 1

此问题的方法取决于您必须支持的浏览器。如果您需要支持旧浏览器，则可能需要像display: table-cell这样的hack或javascript方法。无论哪种方式，它都应该比它应该更难。

但是，如果您可以使用现代的常绿浏览器，那么新的CSS Flexbox规范会使这个问题变得微不足道。要在这种情况下使用它，您只需在display: flex;元素上设置.container即可。然后，因为您希望扩展内部元素以消耗任何可用空间，所以您使用flex-grow属性。在我的示例中，我设置了flex-grow: 1;，以便它们占用相同数量的剩余空间，但您可以使用各种值，以便它们消耗的剩余空间有多少。见the fiddle。

这只是Flexbox的开始。您可以动态分配空间，重新排序元素的显示等等。我推荐Chris Coyier的'Complete Guide to Flexbox'作为您的日常参考，尽管您可能也想搜索一些教程。

编辑：我不一定要把display: table-cell称为黑客。它实际上工作得很好，并且是规范的用途。如果您需要为旧版浏览器动态分配空间，或者即使Flexbox没有为您提供完全您想要的内容，请尝试使用它。

CSS：如何根据兄弟姐妹的数量应用可变宽度

1 个答案: