巧用 HTML 和 CSS 实现 7:3 左右布局，手机端右 div 自动下移！

可以使用 HTML 和 CSS 来实现这个布局需求。以下是具体的代码实现： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 定义父容器，使用 flex 布局 */ .container { display: flex; flex-wrap: wrap; } /* 左边的 div，宽度占比 70% */ .left { width: 70%; background-color: lightblue; } /* 右边的 div，宽度占比 30% */ .right { width: 30%; background-color: lightgreen; } /* 媒体查询，当屏幕宽度小于等于 768px 时（手机端），让左右 div 都占满 100% 宽度 */ @media (max-width: 768px) { .left, .right { width: 100%; } } </style> </head> <body>  <div class="container">  <div class="left"> 左边的内容 </div>  <div class="right"> 右边的内容 </div> </div> </body> </html> ``` 代码解释： 1. 首先，在 HTML 中创建了一个父容器 `div`，并为其添加了 `container` 类。在这个父容器中，包含了两个子 `div`，分别添加了 `left` 和 `right` 类，用于显示左右两边的内容。 2. 在 CSS 中，为 `container` 类设置了 `display: flex`，使其成为一个弹性容器，并且使用 `flex-wrap: wrap` 来允许子元素换行。 3. 为 `left` 类设置宽度为 70%，颜色为浅蓝色；为 `right` 类设置宽度为 30%，颜色为浅绿色。 4. 使用媒体查询 `@media (max-width: 768px)` 来判断屏幕宽度是否小于等于 768px（一般认为是手机端的宽度）。当满足这个条件时，将 `left` 和 `right` 类的宽度都设置为 100%，从而实现手机端右边的 `div` 自动下移的效果。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 媒体查询的宽度值需要根据实际的设计需求和目标设备进行调整，不同的项目可能需要不同的断点。 2. 要注意 `flex-wrap` 属性的使用，确保在需要换行时子元素能够正确布局。 3. 在设置元素宽度时，要考虑到可能存在的内边距、边框等因素，避免出现布局混乱的情况。 ######[AI写代码神器 | 704点数解答 | 2025-09-05 11:26:15]

服务商

更多选项

快捷项

自定义