css如何讓兩個(gè)div在同一行顯示

發(fā)布時(shí)間：2021-03-05 13:38:45 來源：億速云閱讀：8266 作者：小新欄目：web開發(fā)

這篇文章主要介紹了css如何讓兩個(gè)div在同一行顯示，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

兩個(gè)div在同一行顯示的方法：1、給兩個(gè)div元素設(shè)置“display:inline;”或“display:inline-block;”樣式，讓其轉(zhuǎn)變?yōu)閮?nèi)聯(lián)元素或行內(nèi)塊元素即可。2、給兩個(gè)div元素設(shè)置“float:left;”樣式即可。

在HTML中，div元素是一個(gè)塊狀元素，每個(gè)塊級元素都是獨(dú)自占一行；因而多個(gè)div元素?zé)o法在一行顯示。

那么怎么讓兩個(gè)div在同一行顯示？下面給大家介紹一下。

方法1：使用display屬性讓其轉(zhuǎn)變?yōu)閮?nèi)聯(lián)元素或行內(nèi)塊元素

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

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

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				border: 1px solid red;
				display: inline-block;
				/*display:inline;*/
			}
		</style>
	</head>
	<body>
		<div>div測試文本！</div>
		<div>div測試文本！</div>
	</body>
</html>

效果圖：

css如何讓兩個(gè)div在同一行顯示

方法2：使用float讓Div并排顯示

我們對div設(shè)置一個(gè)float浮動(dòng)屬性即可解決不并排顯示，只要你的并排div盒子總寬度小于或等于最外層盒子寬度即可實(shí)現(xiàn)多個(gè)div對象并排顯示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				border: 1px solid red;
				float: left;
			}
		</style>
	</head>
	<body>
		<div>div測試文本！</div>
		<div>div測試文本！</div>
	</body>
</html>

效果圖：

css如何讓兩個(gè)div在同一行顯示

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

如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何讓兩個(gè)div在同一行顯示”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

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

css如何讓兩個(gè)div在同一行顯示

猜你喜歡

最新資訊

相關(guān)推薦

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