CSS元素并排对齐问题：新手无法使两个区块横向排列

错误原因 #

1. 浮动未统一设置：仅给#fruits添加了float: left，#computer属于正常文档流的块级元素，默认会占据父容器整行宽度，因此被挤到浮动元素下方。
2. 宽度与margin冲突：你给.item设置了margin: 12px，两个48%宽度的元素加上左右margin，总宽度会超出父容器，即使设置了浮动也可能导致换行。

修复方案 #

方案1：修复浮动布局

给#computer添加浮动，并处理父容器高度塌陷问题，同时调整宽度避免溢出：

* {
  box-sizing: border-box;
}

.container {
  width: auto;
  border: 3px solid black;
  margin: 33px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 新增：清除浮动，解决父容器高度塌陷 */
.container::after {
  content: "";
  display: table;
  clear: both;
}

.item {
  border: 4px;
  margin: 12px;
  padding: 12px 4px;
  background: rgb(197, 105, 105);
  border-radius: 12px;
}

#fruits {
  float: left;
  width: calc(50% - 24px); /* 计算宽度：50%减去左右margin总和24px */
  border: 3px solid darkblue;
}

#computer {
  float: left; /* 新增浮动 */
  width: calc(50% - 24px);
  border: 3px solid darkblue;
}

#stationary {
  float: left;
  width: calc(50% - 24px);
  border: 3px solid darkblue;
}

方案2：使用Flexbox布局（推荐）

Flexbox是现代CSS布局方案，无需处理浮动塌陷和复杂宽度计算，更易维护：

* {
  box-sizing: border-box;
}

.container {
  width: auto;
  border: 3px solid black;
  margin: 33px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex; /* 启用flex布局 */
  flex-wrap: wrap; /* 允许元素换行 */
}

.item {
  border: 4px;
  margin: 12px;
  padding: 12px 4px;
  background: rgb(197, 105, 105);
  border-radius: 12px;
}

#fruits {
  flex: 0 0 calc(50% - 24px); /* 固定宽度，不放大缩小 */
  border: 3px solid darkblue;
}

#computer {
  flex: 0 0 calc(50% - 24px);
  border: 3px solid darkblue;
}

#stationary {
  flex: 0 0 calc(50% - 24px);
  border: 3px solid darkblue;
}

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