巧用 CSS Flexbox 与媒体查询：实现两 div 左右布局，手机端右 div 自动下移（附代码及注意点）

可以使用 CSS 的 Flexbox 布局配合媒体查询来实现两个 `div` 左右布局，并且在手机端右边的 `div` 自动下移。以下是示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 父容器使用 Flexbox 布局 */ .container { display: flex; /* 水平排列子元素 */ flex-direction: row; } /* 左右两个 div 的通用样式 */ .left-div, .right-div { /* 给每个 div 加上边框以便观察 */ border: 1px solid black; /* 设置内边距 */ padding: 20px; /* 子元素的初始宽度 */ width: 50%; } /* 媒体查询，当屏幕宽度小于 768px 时（一般认为是手机端） */ @media (max-width: 768px) { .container { /* 改变子元素的排列方向为垂直 */ flex-direction: column; } .left-div, .right-div { /* 手机端时每个 div 宽度为 100% */ width: 100%; } } </style> </head> <body> <div class="container"> <div class="left-div">左边的 div</div> <div class="right-div">右边的 div</div> </div> </body> </html> ``` 代码解释： 1. `.container` 类使用 `display: flex` 和 `flex-direction: row` 实现子元素的水平排列。 2. `.left-div` 和 `.right-div` 设置了宽度为 50%，并且有边框和内边距。 3. 使用 `@media (max-width: 768px)` 进行媒体查询，当屏幕宽度小于 768px 时，将 `.container` 的 `flex-direction` 改为 `column`，实现垂直排列，同时将两个 `div` 的宽度改为 100%。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 媒体查询的断点值需要根据实际的设计需求进行调整，不同的项目可能有不同的断点。 2. 父容器的 `flex` 属性可能会影响子元素的布局，需要确保没有其他的 `flex` 属性干扰。 3. 要注意不同浏览器对 Flexbox 布局的兼容性，特别是一些旧版本的浏览器。 ######[AI写代码神器 | 628点数解答 | 2025-09-05 11:25:11]

服务商

更多选项

快捷项

自定义