css如何設(shè)置4個(gè)div并排顯示

發(fā)布時(shí)間：2021-07-21 16:26:19 來(lái)源：億速云閱讀：1504 作者：chen 欄目：web開(kāi)發(fā)

這篇文章主要講解了“css如何設(shè)置4個(gè)div并排顯示”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css如何設(shè)置4個(gè)div并排顯示”吧！

css設(shè)置4個(gè)div并排的方法：1、使用float屬性讓4個(gè)div浮動(dòng)起來(lái)即可。2、使用“display:inline;”或“display: inline-block;”樣式將4個(gè)div轉(zhuǎn)換為內(nèi)聯(lián)元素或內(nèi)聯(lián)塊狀元素即可。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

div是塊狀元素，會(huì)獨(dú)占一行，其寬度自動(dòng)填滿其父元素寬度；多個(gè)div元素在一起，會(huì)自動(dòng)換行顯示。那么如何讓多個(gè)div元素并排顯示？下面來(lái)給大家介紹一下方法。

方法1：使用float讓div浮動(dòng)起來(lái)

只要你的并排div盒子總寬度小于或等于最外層盒子寬度即可實(shí)現(xiàn)多個(gè)div對(duì)象并排顯示。

示例：

<!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測(cè)試文本！</div>
		<div>div測(cè)試文本！</div>
		<div>div測(cè)試文本！</div>
		<div>div測(cè)試文本！</div>
	</body>
</html>

效果圖：

css如何設(shè)置4個(gè)div并排顯示

float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。

方法2：使用display屬性將div轉(zhuǎn)換為內(nèi)聯(lián)元素或內(nèi)聯(lián)塊狀元素

內(nèi)聯(lián)元素或內(nèi)聯(lián)塊狀元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下，才會(huì)換行。

<!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測(cè)試文本！</div>
		<div>div測(cè)試文本！</div>
		<div>div測(cè)試文本！</div>
		<div>div測(cè)試文本！</div>
	</body>
</html>

效果圖：

css如何設(shè)置4個(gè)div并排顯示

display屬性用于定義建立布局時(shí)元素生成的顯示框類型。

display:inline;：元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。
display:inline-block;：元素會(huì)被顯示為行內(nèi)塊元素，元素前后沒(méi)有換行符。

感謝各位的閱讀，以上就是“css如何設(shè)置4個(gè)div并排顯示”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css如何設(shè)置4個(gè)div并排顯示這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

css如何設(shè)置4個(gè)div并排顯示

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽