不用 float，巧用 Flexbox 与 Grid 实现两 div 水平布局，自适应移动端右侧自动下移！

可以使用Flexbox或Grid布局来实现两个`div`水平布局，且左边的`div`更宽，同时能自适应移动端，在移动端时右侧的`div`自动下移。使用Flexbox布局的代码示例 ```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样式 */ .left { /* 左边的div占据2/3的宽度 */ flex: 2; background-color: lightblue; } /* 右边的div样式 */ .right { /* 右边的div占据1/3的宽度 */ flex: 1; background-color: lightcoral; } /* 媒体查询，当屏幕宽度小于600px时，子元素变为垂直布局 */ @media (max-width: 600px) { .container { flex-direction: column; } } </style> </head> <body> <div class="container"> <div class="left"> 左边的div，更宽些 </div> <div class="right"> 右边的div </div> </div> </body> </html> ``` 使用Grid布局的代码示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 父容器使用grid布局 */ .container { display: grid; /* 定义两列，左边占2/3，右边占1/3 */ grid-template-columns: 2fr 1fr; } /* 左边的div样式 */ .left { background-color: lightblue; } /* 右边的div样式 */ .right { background-color: lightcoral; } /* 媒体查询，当屏幕宽度小于600px时，变为一列布局 */ @media (max-width: 600px) { .container { grid-template-columns: 1fr; } } </style> </head> <body> <div class="container"> <div class="left"> 左边的div，更宽些 </div> <div class="right"> 右边的div </div> </div> </body> </html> ``` 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 媒体查询的宽度设置要根据实际的设计需求来，不同的项目可能需要不同的断点宽度。 2. 在使用Flexbox或Grid布局时，要注意浏览器的兼容性，特别是一些较旧的浏览器可能不支持某些属性。 3. 父容器的宽度要确保是自适应的，否则子元素的自适应效果可能会受到影响。 ######[AI写代码神器 | 775点数解答 | 2025-09-05 13:45:12]

服务商

更多选项

快捷项

自定义