如何使用CSS并排浮動3個div？我知道如何讓2個div并排浮動，只需向左浮動一個，向右浮動另一個。但是如何使用3個div進行此操作還是應該只為此目的使用表格？
3 回答
小怪獸愛吃肉
TA貢獻1852條經驗 獲得超1個贊
只要給它們一個寬度float: left;，這是一個例子：
<div style="width: 500px;">
<div style="float: left; width: 200px;">Left Stuff</div>
<div style="float: left; width: 100px;">Middle Stuff</div>
<div style="float: left; width: 200px;">Right Stuff</div>
<br style="clear: left;" />
</div>
眼眸繁星
TA貢獻1873條經驗 獲得超9個贊
現代方法是使用CSS flexbox，請參閱支持表。
.container {
display: flex;
}
.container > div {
flex: 1; /*grow*/
}
<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>
您也可以使用CSS網格，請參閱支持表。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}
<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>
慕運維8079593
TA貢獻1876條經驗 獲得超5個贊
它與你對兩個div的方式相同，只是向左或向右浮動第三個div。
<style>
.left{float:left; width:33%;}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
- 3 回答
- 0 關注
- 1111 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消