如何用CSS实现移动端响应式div元素布局？

你可以通过添加媒体查询重构CSS，实现桌面端横向排列、移动端垂直排列且box2/box4占满宽度的效果，修改后的代码如下：

优化后的CSS #

/* 公共样式：所有盒子共享的属性 */
.box {
  padding: 13px;
  height: 200px;
  margin-right: 5px;
  float: left;
  box-sizing: border-box; /* 避免padding撑开宽度，保证布局准确 */
}

/* 各盒子的特殊样式 */
.box1 {
  width: 10%;
  background: blue;
}
.box2 {
  width: 30%;
  background: green;
}
.box3 {
  width: 10%;
  background: yellow;
}
.box4 {
  width: 30%;
  background: red;
  margin-right: 0; /* 最后一个盒子取消右侧间距 */
}

/* 移动端响应式适配（屏幕宽度≤768px时生效） */
@media (max-width: 768px) {
  .box {
    float: none; /* 取消浮动，改为垂直排列 */
    width: auto; /* 默认自适应宽度 */
    margin-right: 0; /* 清除右侧间距 */
    margin-bottom: 5px; /* 垂直排列时添加底部间距，避免挤在一起 */
  }
  .box2, .box4 {
    width: 100%; /* 文本盒子占满屏幕宽度 */
  }
  .box img {
    max-width: 100%; /* 图片自适应盒子宽度，避免溢出 */
    height: auto;
  }
}

对应调整后的HTML #

<div class="box box1">
  <img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="border: 0!important;" />
</div>
<div class="box box2">
  kdféajkdéfdéf
</div>
<div class="box box3">
  <img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="border: 0!important;" />
</div>
<div class="box box4">
  hdhdhgdghd
</div>

关键修改点说明： #

• 新增box-sizing: border-box：确保padding不会额外撑开盒子宽度，布局更精准
• 抽离公共样式：减少代码重复，后期维护更方便
• 媒体查询断点设为768px：覆盖大部分移动端设备
• 移动端取消浮动并调整宽度：实现垂直排列，同时让文本盒子占满屏幕
• 图片添加自适应属性：避免在小屏幕上溢出盒子

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