- <div class="container">
- <div class="box">Div 1div>
- <div class="box">Div 2div>
- div>
- .container {
- display: flex; /* 使用flex布局 */
- }
-
- .box {
- width: 50%; /* 两个div各占50%的宽度 */
- }
要实现两个div水平对齐,可以使用CSS中的flex布局。在这个例子中,我们创建了一个容器div,里面包含两个box div。使用flex布局可以让容器中的元素水平排列,并且通过设置每个元素的宽度为50%,可以使两个div在水平方向上占据相等的空间,从而实现对齐。