首页两个盒子并列一左一右HTML

两个盒子并列一左一右HTML

时间: 2024-10-17 16:02:16 浏览: 22

在HTML中创建两个并列放置的盒子，你可以使用`<div>`元素配合CSS样式来实现。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; /* 使用Flexbox布局 */ justify-content: space-between; /* 左右盒子间距均匀分布 */ } .box { width: 50%; /* 盒子宽度为父容器的一半 */ padding: 20px; background-color: #f1f1f1; border: 1px solid #ccc; margin-bottom: 10px; } </style> </head> <body> <div class="container"> <div class="box box-left">左侧盒子内容</div> <div class="box box-right">右侧盒子内容</div> </div> </body> </html> ``` 在这个例子中，`.container`类设置了`display: flex`使其成为Flex容器，并通过`justify-content: space-between`让左右盒子在水平方向上均匀分布。`.box`类定义了每个盒子的基本样式，包括宽度、内边距、背景颜色等。

阅读全文