如何用 CSS 实现固定宽度容器中元素的动态排列？

css 布局排版问题的解决

在 css 布局中，需要根据不同的元素内容和位置进行调整。当需要在固定宽度容器中动态展现多个元素时，可能会遇到排版问题。

问题描述

如下图所示，需要在固定宽度的容器中排列一定数量的元素。这些元素的展示与隐藏可能根据其他元素的状态而定。当元素数量为偶数时，需要将其排列为每行两列，每个元素宽度固定。而当元素数量为奇数时，最后一个元素需要独占一行。

解决方案

要满足此需求，可以使用以下 css 选择器：

.list .item:last-child:not(:nth-child(2n)) {
  /* 样式代码 */
}

这个选择器可以选中容器中最后一个元素，并且其位置不是 2n（不是偶数位置）。这样，便可以针对奇数位置的最后一个元素设置样式，使其独占一行。

示例演示

例如，在容器中加入以下 html 代码：

<div class="list">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
</div>

并使用前文提供的 css 样式：

.list .item {
  width: 100px;
  height: 100px;
  float: left;
}

.list .item:last-child:not(:nth-child(2n)) {
  clear: both;
}

效果如下图所示：

• 当元素数量为偶数时：

• 当元素数量为奇数时：

以上就是如何用 CSS 实现固定宽度容器中元素的动态排列？的详细内容，更多请关注其它相关文章！