并排放置两个div可以使用CSS的flexbox布局或者grid布局来实现。以下是两种方法的示例:
<div style="display: flex;">
<div style="width: 50%; background-color: #f1f1f1;">Div 1</div>
<div style="width: 50%; background-color: #e1e1e1;">Div 2</div>
</div>
在上面的示例中,外层的div设置了display: flex;
,使其成为一个flex容器。两个内层的div都设置了width: 50%;
,使它们平分容器的宽度。你可以根据需要调整宽度和背景颜色。
<div style="display: grid; grid-template-columns: 1fr 1fr;">
<div style="background-color: #f1f1f1;">Div 1</div>
<div style="background-color: #e1e1e1;">Div 2</div>
</div>
在上面的示例中,外层的div设置了display: grid;
,使其成为一个grid容器。通过grid-template-columns: 1fr 1fr;
设置了两列,每列的宽度平分容器的宽度。你可以根据需要调整背景颜色。
以上两种方法都可以实现并排放置两个div并对齐。具体选择哪种方法取决于你的需求和布局的复杂程度。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云