溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css如何設置4個div并排顯示”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css如何設置4個div并排顯示”吧！
css設置4個div并排的方法：1、使用float屬性讓4個div浮動起來即可。2、使用“display:inline;”或“display: inline-block;”樣式將4個div轉換為內聯元素或內聯塊狀元素即可。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
div是塊狀元素，會獨占一行，其寬度自動填滿其父元素寬度；多個div元素在一起，會自動換行顯示。那么如何讓多個div元素并排顯示？下面來給大家介紹一下方法。
方法1：使用float讓div浮動起來
只要你的并排div盒子總寬度小于或等于最外層盒子寬度即可實現多個div對象并排顯示。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 120px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div>div測試文本！</div>
<div>div測試文本！</div>
<div>div測試文本！</div>
<div>div測試文本！</div>
</body>
</html>效果圖：
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
方法2：使用display屬性將div轉換為內聯元素或內聯塊狀元素
內聯元素或內聯塊狀元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
border: 1px solid red;
display:inline;
/* display: inline-block; */
}
</style>
</head>
<body>
<div>div測試文本！</div>
<div>div測試文本！</div>
<div>div測試文本！</div>
<div>div測試文本！</div>
</body>
</html>效果圖：
display屬性用于定義建立布局時元素生成的顯示框類型。
display:inline;：元素會被顯示為內聯元素，元素前后沒有換行符。
display:inline-block;：元素會被顯示為行內塊元素，元素前后沒有換行符。
感謝各位的閱讀，以上就是“css如何設置4個div并排顯示”的內容了，經過本文的學習后，相信大家對css如何設置4個div并排顯示這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
