首页一个盒子里包含两个盒子且两个盒子并列一左一右的HTML代码

一个盒子里包含两个盒子且两个盒子并列一左一右的HTML代码

时间: 2024-10-19 18:03:22 浏览: 21

要创建一个HTML结构，表示一个大盒子里面有两个小盒子并排排列，你可以使用`<div>`标签嵌套。这里是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; /* 设置容器为弹性布局 */ width: 200px; /* 可以根据需要调整宽度 */ background-color: #f0f0f0; } .box { height: 100px; border: 1px solid #ccc; margin-right: 10px; /* 分隔两个小盒子 */ } .left-box { background-color: lightblue; } .right-box { background-color: lightgreen; } </style> </head> <body> <div class="container"> <div class="box left-box">左侧盒子</div> <div class="box right-box">右侧盒子</div> </div> </body> </html> ``` 这个例子中，`.container`是大的外层盒子，`.box`是每个小盒子，`.left-box`和`.right-box`分别对应左右两侧不同的背景颜色。你可以根据实际需求修改样式。

阅读全文