/* CSS代码 */ .container { display: flex; justify-content: space-between; align-items: center; } .box1, .box2 { width: 50%; }
首先,大家需要一个包含两个块元素的容器,使用flex布局可以方便地将它们排列在一起。使用justify-content属性可以控制它们之间的间距,大家选择使用space-between可以让它们均匀分布在容器内。
在代码中,大家给每个块元素分别定义了box1和box2类名,并设置了它们的宽度为50%,这样它们就可以并排显示了。此外,使用align-items属性可以让它们在垂直方向上对齐,比如大家可以选择使用center属性让它们水平居中,实现更好的视觉效果。
总的来说,CSS的灵活性和强大的布局方式可以帮助大家轻松实现各种排版效果,包括两块元素并排。掌握好这些技巧,可以让大家更快更有效地完成网页设计和开发工作。