如何让两个div并排且各占100%屏幕宽度？inline-block方案无效

嘿，我一眼就瞅出问题所在啦——你给两个div都设置了width: 100%，哪怕用了inline-block，每个元素都会占满父容器的整个宽度，自然没法实现并排效果啦😎

下面给你几种靠谱的解决办法，按需选用：

方法1：调整inline-block的宽度并处理空白间隙 #

既然要并排，就得给每个div分配合适的宽度（加起来不能超过父容器宽度），另外还要注意inline-block元素之间默认会有空白间隙，得一起处理：

/* 父容器处理空白间隙 */
.parent {
  font-size: 0; /* 消除inline-block元素间的空白 */
}

.A, .B {
  display: inline-block;
  width: 50%; /* 各占一半宽度 */
  font-size: 16px; /* 恢复子元素的字体大小 */
  box-sizing: border-box; /* 避免padding/border撑大宽度 */
}

<div class="parent">
  <div class="A">我是A</div>
  <div class="B">我是B</div>
</div>

方法2：用Flexbox（推荐，现代布局首选） #

Flexbox是现在最常用的布局方案，代码简洁还没inline-block的空白问题：

.parent {
  display: flex; /* 父容器设为flex容器 */
}

.A, .B {
  flex: 1; /* 两个元素平分父容器宽度 */
  /* 也可以设固定宽度，比如width: 200px; */
}

<div class="parent">
  <div class="A">我是A</div>
  <div class="B">我是B</div>
</div>

方法3：用Grid布局（适合更复杂的网格场景） #

如果需要更规整的网格布局，Grid也是很棒的选择：

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列各占1份宽度 */
  /* 也可以设固定列宽，比如grid-template-columns: 200px 200px; */
}

<div class="parent">
  <div class="A">我是A</div>
  <div class="B">我是B</div>
</div>

总结一下：如果只是简单的并排，Flexbox是最省心的选择；如果是复杂的多列布局，Grid会更顺手。

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