帮我写一个代码让两个盒子实行左右对齐排列
时间: 2023-08-28 20:12:49 浏览: 509
flex 弹性布局,最后一行数量不足一行 列表项目左对齐的解决办法
5星 · 资源好评率100%
好的,你可以尝试以下代码:
HTML 代码:
```
<div class="container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>
```
CSS 代码:
```
.container {
display: flex;
}
.box1 {
flex: 1;
text-align: right;
}
.box2 {
flex: 1;
text-align: left;
}
```
这里使用了 Flexbox 布局,通过设置 `display: flex` 和 `flex: 1`,使两个盒子的宽度平分容器的宽度,通过设置 `text-align` 属性,使一个盒子靠左对齐,一个盒子靠右对齐。
阅读全文