溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css如何使用inline-block盒模型實現多欄布局，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
假如把下面的三個div顯示在同一行
<div id="parent"> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </div>
inline-block盒模型
inline-block盒模型的元素既不會占據一行，同時也支持用width、height指定寬度和高度。display:inline-block 將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。通常需要設置vertical-align：top使其頂端對齊。
#parent>div{
display:inline-block;
border:1px solid black;
width:200px;
height:200px;
text-align: center;
}
#box1{
background-color:red;
}
#box2{
background-color:yellow;
}
#box3 {
background-color:blue;
}inline-block水平呈現的元素間，換行顯示或空格分隔的情況下會有間距。把空格去掉間隙自然就會消失，這樣就不會顯示間隔。
<div id="parent"> <div id="box1">1</div><div id="box2">2</div><div id="box3">3</div> </div>
關于“css如何使用inline-block盒模型實現多欄布局”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
