用 CSS Flexbox 实现 Web 两个盒子横排排列的示例代码

您可以使用CSS的flexbox属性实现两个盒子横排排列。以下是一个示例代码： ```html <style> .container { display: flex; /* 使用 flexbox 布局 */ } .box { flex: 1; /* 将两个盒子平分布局 */ height: 100px; background-color: gray; margin: 10px; } </style> <div class="container"> <div class="box"></div> <!-- 第一个盒子 --> <div class="box"></div> <!-- 第二个盒子 --> </div> ``` 这段代码会创建一个包含两个盒子的容器，它们会横向排列。`.container` 类定义了一个使用 flexbox 布局的容器，`.box` 类定义了两个盒子的样式，每个盒子的宽度会根据 `flex: 1` 进行平分。 您可以根据需要调整盒子的宽度、高度和间距等样式。 ######[AI写代码神器 | 424点数解答 | 2024-06-20 14:28:35]