两个div实现并排布局的CSS问题求助（附jsfiddle链接）

嘿，我帮你搞定这个并排布局的问题～ 要让两个div从上下堆叠变成横向并排，有几个实用的方法，我给你详细拆解：

这是现在前端布局的首选方案，只需要给父容器加一行CSS就能实现：

/* 给包含两个div的父容器添加 */
.parent-box {
  display: flex;
}

/* 可选：让两个div平分父容器宽度，或者自定义宽度 */
.child-div {
  flex: 1; /* 平分可用空间，也可以写 width: 50%; */
  /* 加个内边距和边框方便看效果 */
  padding: 10px;
  border: 1px solid #ccc;
}

原理：父容器设为flex后，子元素默认会横向排列，还能轻松调整对齐方式、间距，兼容性也覆盖了绝大多数现代浏览器。

如果需要适配一些老版本浏览器，可以用传统的float方法：

.child-div {
  float: left;
  width: 50%; /* 按需求设置宽度，比如固定值 300px */
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* 避免内边距撑宽元素 */
}

/* 一定要给父容器清除浮动，防止高度塌陷 */
.parent-box::after {
  content: "";
  display: table;
  clear: both;
}

注意：float会让元素脱离文档流，所以必须给父容器加清除浮动的样式，不然父容器高度会变成0。

如果之后可能需要扩展成多列布局，Grid会更方便：

.parent-box {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列平分空间，也可以写固定宽度比如 200px 300px */
  gap: 15px; /* 可选：设置两个div之间的间距 */
}

.child-div {
  padding: 10px;
  border: 1px solid #ccc;
}

原理：grid-template-columns直接定义了列的数量和宽度，非常直观。

额外小提示 #

• 记得给元素加上box-sizing: border-box，这样内边距和边框不会超出你设置的宽度，避免布局错乱：

* {
  box-sizing: border-box;
}

• 如果两个div的内容高度不一样，Flexbox和Grid还能轻松设置垂直对齐方式，比如给父容器加align-items: center就能让子元素垂直居中。

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