「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 屬性即可。

、使用css float并排顯示 - TOP

我們對div設置一個float浮動屬性即可解決不并排顯示，只要你的并排div盒子總寬度小于或等于最外層盒子寬度即可實現多個div對象并排顯示。

加float浮動實現多個div并排顯示

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

今天我的項目使用如下：

#left{ margin-top:0px; margin-left:50px; width:400px; height:100%;float:left; background-color:#CCCCCC}

#right{ margin-top:0px; height:100%;float:left }

法一、兩個div都設置 display: table-cell;

方法二、父級div設置 display: -webkit-box;

在線咨詢

上一篇：前端開發：5款Bootstrap響應式后臺管理模板，兼容不同屏幕分辨率
下一篇：HTML里h1~h6標簽和p標簽里的內容不會自動換行？

您的項目需求

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