首頁 > 文章 > web前端 > css怎麼讓盒子並排顯示

css怎麼讓盒子並排顯示

盒子並排顯示的方法：1、使用float屬性設定並排顯示，只需要給div設定「float:right|left;」；2、使用display屬性設定同行顯示，只需要給div設定“display:inline;”即可。

css怎麼讓盒子並排顯示

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

我們先設定3個div盒子對象，什麼css樣式都不設定看看效果。程式碼如下：

<body>
    <div>第一个盒子</div>
    <div>第二个盒子</div>
    <div>第三个盒子</div>
</body>

css怎麼讓盒子並排顯示

div盒子本身預設樣式屬性是獨佔一行，而解決p獨佔一行方法通常有兩種，一種為設定浮動，另外一種為設定display樣式。接下來為大家透過文章圖片案例方法介紹解決p盒子物件並排橫向排列且同行顯示方法。

我們對div設定一個float浮動屬性即可解決不並排顯示，只要你的並排p盒子總寬度小於或等於最外層盒子寬度即可實現多個p物件並排顯示。
注意：①設定float屬性；②並排總寬度小於外層寬度。

<style>
div{
    border: 1px solid #000;
    float:left;
}
</style>

css怎麼讓盒子並排顯示

這裡我們對div通設一個浮動，當然實際使用時候，要通排顯示div物件的加入css類，我們就對要同儕顯示css選擇器設定浮動。避免其它不需要設定的也被加入浮動樣式。

我們加入display:inline即可解決實現同儕並排顯示div盒子物件。

對div標籤設定div{ display:inline}樣式，解決後截圖：

<style>
div{
    border: 1px solid #000;
    display: inline;
}
</style>

css怎麼讓盒子並排顯示

以上是css怎麼讓盒子並排顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

看更多