首页三个div并排，第一个div宽度为200px，第二个div宽度为300px，剩下的div继承剩下的全部宽度

三个div并排，第一个div宽度为200px，第二个div宽度为300px，剩下的div继承剩下的全部宽度

时间: 2024-11-16 21:19:43 浏览: 18

要实现三个div并排，其中第一个div宽度固定为200px，第二个div宽度为300px，第三个div自动继承剩余宽度，你可以使用CSS的flexbox布局或者传统的块级元素布局结合百分比宽度。这里分别给出两种方法： **使用Flexbox布局**: ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; /* 主轴方向（默认row） */ } .first-div { width: 200px; background: lightblue; /* 仅作示例，实际应用中可以移除 */ } .second-div { width: 300px; background: lightgreen; /* 仅作示例，实际应用中可以移除 */ } .third-div { flex: 1; /* 自动填充剩余空间 */ background: lightyellow; /* 仅作示例，实际应用中可以移除 */ } </style> </head> <body> <div class="container"> <div class="first-div">First div (200px)</div> <div class="second-div">Second div (300px)</div> <div class="third-div">Third div (infinite width)</div> </div> </body> </html> ``` **使用传统布局配合百分比宽度**: ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { width: 100%; display: inline-block; } .first-div { width: 200px; float: left; } .second-div { width: 300px; float: left; } .third-div { width: calc(100% - 500px); /* 总宽度减去前两个div宽度 */ float: left; box-sizing: border-box; /* 防止边框影响宽度计算 */ } </style> </head> <body> <div class="container"> <div class="first-div">First div (200px)</div> <div class="second-div">Second div (300px)</div> <div class="third-div">Third div (remaining space)</div> </div> </body> </html> ```

阅读全文