「CSS」將多個div元素并列為一行的方法

、前言

CSS中最常見的塊元素，便是 div，每一個都將獨立為一行。而最常見的內聯元素，便是 span了，每一個都默認從左到右排列連接起來。

有時候我們需要 div 的結構，但是是需要 span 的效果，如何將這個特點一起利用起來呢？

二、需求

想把上圖的京東·技術與數據中臺，和logo為一行，初始代碼如下，初始效果如上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .position-name {
            font-weight: 600;
        }

        .position-desc {
            font-size: 13px;
            color: #a6a6a6;
        }
    </style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div>
    <div class="position-name">京東</div>
    <div class="position-desc">技術與數據中臺</div>
</div>
</body>
</html>

三、解決

加上 display: inline-block，使之為內聯元素，而非塊元素即可，修改后的代碼如下，修改后的效果如上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .position {
            /* 融合為塊元素 */
            display: inline-block;
            margin-left: 8px;
        }

        .position-name {
            font-weight: 600;
        }

        .position-desc {
            font-size: 13px;
            color: #a6a6a6;
        }
    </style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div class="position">
    <div class="position-name">京東</div>
    <div class="position-desc">技術與數據中臺</div>
</div>
</body>
</html>

四、小結

利用好 CSS 提供的 display: inline-block 屬性即可。

三角

<div class="three"></div>

.圣杯布局和雙飛翼布局

2.絕對定位法

左右div設置為絕對定位；左div設置為 left: 0px;右div設置為 right: 0px;

如：

<!DOCTYPE html>
	<html lang="en">
	    <head>
	        <meta charset="UTF-8">
	        <title>Title</title>
	    </head>
	    <style>
	        html,body{
	            margin: 0px;
	            width: 100%;
	        }
	        h3{
	            height: 100px;
	            margin: 20px 0 0;
	        }
	        #left,#right{
	            width: 200px;
	            height: 200px;
	            background-color: #ffe6b8;
	            position: absolute;
	            top: 120px;
	        }
	        #left{
	            left: 0px;
	        }
	        #right{
	            right: 0px;
	        }
	        #center{
	            margin: 2px 210px;
	            background-color: #eee;
	            height: 200px;
	        }
	    </style>
	<body>
	    <h3>實現三列寬度自適應布局</h3>
	    <div id="left">我是左邊</div>
	    <div id="right">我是右邊</div>
	    <div id="center">我是中間</div>
	</body>
	</html>

該布局的不足：因為是絕對定位，如果頁面上有其他的內容，top的值要小心處理，最好給CSS樣式進行一個初始化。

3.使用自身浮動法

自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中，使用margin指定左右外邊距對其進行一個定位。

如下：

<!DOCTYPE html>
	<html lang="en">
	    <head>
	        <meta charset="UTF-8">
	        <title>Title</title>
	    </head>
	    <style>
	        html,body{
	            margin: 0px;
	            width: 100%;
	        }
	        h3{
	            height: 100px;
	            margin: 20px 0 0;
	        }
	        #left,#right{
	            width: 200px;
	            height: 200px;
	            background-color: #ffe6b8;
	        }
	        #left{
	            float: left;
	        }
	        #right{
	            float: right;
	        }
	        #center{
	            margin: 2px 210px;
	            background-color: #eee;
	            height: 200px;
	        }
	    </style>
	<body>
	    <h3>實現三列寬度自適應布局</h3>
	    <div id="left">我是左邊</div>
	    <div id="right">我是右邊</div>
	    <div id="center">我是中間</div>
	</body>
	</html>

該布局法的好處是受外界影響小，但是不足是三個元素的順序，center一定要放在最后，這是和絕對定位不一樣的地方，center占據文檔流位置，所以一定要放在最后，左右兩個元素位置沒有關系。當瀏覽器窗口很小的時候，右邊元素會被擊倒下一行。

在線咨詢

上一篇：Node.js 學習筆記：構建 Web 服務
下一篇：前端基礎：HTML

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商