CSS中多個div并排顯示,可以通過以下兩種方式實現:
第一種方式是使用float屬性,將多個div元素浮動到左側或右側。這種方式適用于一行可以容納多個div元素的情況。
<style> .wrapper { width: 100%; overflow: hidden; /* 清除浮動 */ } .box { width: 200px; height: 200px; float: left; /* 將多個div元素浮動到左側 */ margin-right: 20px; background-color: #ccc; } </style> <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
第二種方式是使用display屬性,將多個div元素設置為inline-block或flex布局。這種方式適用于一行只能容納一個div元素的情況。
<style> .wrapper { display: flex; /* 使用flex布局 */ } .box { width: 200px; height: 200px; margin-right: 20px; background-color: #ccc; display: inline-block; /* 將多個div元素設置為inline-block */ } </style> <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
無論哪種方式,都需要對多個div元素進行樣式設置,以便排列整齊。