css布局技巧：巧妙应对奇数元素排列
网页布局
中，元素数量变化是常见情况。本文聚焦一个CSS布局难题：如何用CSS优雅地处理在一个固定宽度容器内，以每行两个元素排列的场景，尤其当元素个数为奇数时，如何避免布局混乱。
问题描述：
假设一个固定宽度容器包含数量不定的元素，这些元素可能动态增减。当元素个数为偶数时，每行显示两个；但若为奇数，最后一个元素需独占一行，保持布局整洁。
解决方案：
利用CSS选择器
可以有效解决此问题。此选择器选中容器的最后一个元素，并排除掉偶数序号的元素。因此，只有当元素个数为奇数时，最后一个元素才会被选中。
实现方法：
通过该选择器，为奇数个元素情况下的最后一个元素设置独占一行的样式，例如设置其宽度为容器的宽度。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
代码示例：
假设容器类名为
，元素类名为
，CSS代码如下：
这样，元素个数为偶数时，元素正常每行两个排列；为奇数时，最后一个元素则独占一行，实现预期布局效果。 此方法避免了JavaScript的复杂性，提高代码效率和可维护性。
:last-child:not(:nth-child(2n)).container.item.container .item:last-child:not(:nth-child(2n)) {
width: 100%; /* 或设置成容器的宽度 */
}