不使用 float，实现两 div 水平布局且左宽右窄的方法及注意事项

在不使用`float`的情况下，有几种方法可以让两个`div`水平布局，并且让左边的`div`更宽。方法一：使用`display: flex` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 父容器使用flex布局 */ .parent { display: flex; } /* 左边的div设置更宽的宽度 */ .left { width: 70%; background-color: lightblue; } /* 右边的div设置较窄的宽度 */ .right { width: 30%; background-color: lightgreen; } </style> </head> <body>  <div class="parent">  <div class="left">左边的div更宽</div>  <div class="right">右边的div较窄</div> </div> </body> </html> ``` 代码解释： - `.parent`类设置`display: flex`，使其成为一个弹性容器，子元素会水平排列。 - `.left`类设置宽度为`70%`，`.right`类设置宽度为`30%`，从而让左边的`div`更宽。方法二：使用`display: inline-block` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 父容器设置字体大小为0，避免inline-block元素之间的间隙 */ .parent { font-size: 0; } /* 左边的div设置更宽的宽度，同时设置为inline-block */ .left { display: inline-block; width: 70%; background-color: lightblue; font-size: 16px; } /* 右边的div设置较窄的宽度，同时设置为inline-block */ .right { display: inline-block; width: 30%; background-color: lightgreen; font-size: 16px; } </style> </head> <body>  <div class="parent">  <div class="left">左边的div更宽</div>  <div class="right">右边的div较窄</div> </div> </body> </html> ``` 代码解释： - `.parent`类设置`font-size: 0`，是为了消除`inline-block`元素之间的间隙。 - `.left`和`.right`类设置`display: inline-block`，让两个`div`水平排列，同时分别设置不同的宽度。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 使用`flex`布局时，要注意浏览器的兼容性，特别是一些较旧的浏览器可能不支持某些`flex`属性。 2. 使用`inline-block`布局时，要注意元素之间的间隙问题，通常可以通过设置父元素的`font-size: 0`来解决，但要记得在子元素中重新设置字体大小。 3. 在设置宽度时，要考虑到元素的内边距、边框等因素，避免出现宽度超出预期的情况。 ######[AI写代码神器 | 855点数解答 | 2025-09-05 11:38:37]

服务商

更多选项

快捷项

自定义