为何使用CSS设置三列布局却仅显示一列？

你设置了三列的宽度比例，但因为.column是块级元素，默认会独占一行，导致三个列垂直堆叠，只能看到最上方的一列。以下是几种可行的解决方法：

方法1：使用Flexbox布局（推荐） #

给容器添加display: flex属性，让子元素在同一行排列：

.container {
  display: flex;
  width: 100%;
  /* 可选：屏幕宽度不足时允许列换行，避免强制横向滚动 */
  flex-wrap: wrap;
}

.column {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
}

.column:first-child,
.column:last-child {
  flex: 0 0 25%; /* 固定占25%宽度，不收缩、不扩展 */
  min-width: 300px;
}

.column:nth-child(2) {
  flex: 0 0 50%; /* 固定占50%宽度 */
  min-width: 600px;
}

方法2：使用Float布局 #

给每个列添加浮动属性，同时给容器添加清除浮动的样式：

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

.column {
  float: left;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
}

.column:first-child,
.column:last-child {
  width: 25%;
  min-width: 300px;
}

.column:nth-child(2) {
  width: 50%;
  min-width: 600px;
}

方法3：使用Grid布局 #

通过Grid直接定义列的宽度规则，代码更简洁直观：

.container {
  display: grid;
  /* 定义三列宽度，同时满足最小宽度要求 */
  grid-template-columns: minmax(300px, 25%) minmax(600px, 50%) minmax(300px, 25%);
}

.column {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
}

注意事项 #

当屏幕总宽度小于三列最小宽度之和（300px+600px+300px=1200px）时，会出现横向滚动条。若需适配小屏幕，可选择以下方式调整：

• 降低各列的min-width数值
• 在Flex方案中保留flex-wrap: wrap，让列在窄屏幕上自动垂直堆叠
• 在Grid方案中结合auto-fit与fr单位实现响应式列宽调整

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