CSS一行两Div布局异常：单个Div无法左对齐问题求助

问题分析 #

你当前通过nth-child(odd/even)给div设置左/右浮动实现双列布局，但单个div时出现对齐异常，核心原因是浮动布局依赖父容器的正确闭合，且display: inline对浮动元素无效（浮动元素会自动转为block）。

推荐解决方案：改用Flex布局 #

Flex布局能更高效地处理这种自适应对齐场景，无需依赖浮动和nth-child选择器：

/* 给父容器添加以下样式 */
.parent-container {
  display: flex;
  justify-content: space-between; /* 双元素时左右分布，单元素时自动左对齐 */
  flex-wrap: wrap; /* 元素超出一行时自动换行 */
  gap: 10px; /* 可选，添加元素间间距 */
}

/* 设置子div宽度 */
.parent-container div {
  width: 45%;
}

浮动布局修复方案（如果坚持使用浮动） #

1. 移除多余的display: inline属性（浮动元素默认是block）
2. 给父容器添加清除浮动的样式，避免布局塌陷：

.parent-container::after {
  content: "";
  display: table;
  clear: both;
}

/* 保留你的浮动宽度设置 */
.parent-container div:nth-child(odd) {
  float: left;
  width: 45%; 
}
.parent-container div:nth-child(even) {
  float: right;
  width: 45%;
}

内容的提问来源于stack exchange，提问作者tomhuckle