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

、前言

CSS中最常見(jiàn)的塊元素，便是 div，每一個(gè)都將獨(dú)立為一行。而最常見(jiàn)的內(nèi)聯(lián)元素，便是 span了，每一個(gè)都默認(rèn)從左到右排列連接起來(lái)。

有時(shí)候我們需要 div 的結(jié)構(gòu)，但是是需要 span 的效果，如何將這個(gè)特點(diǎn)一起利用起來(lái)呢？

二、需求

想把上圖的京東·技術(shù)與數(shù)據(jù)中臺(tái)，和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">技術(shù)與數(shù)據(jù)中臺(tái)</div>
</div>
</body>
</html>

三、解決

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

<!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">技術(shù)與數(shù)據(jù)中臺(tái)</div>
</div>
</body>
</html>

四、小結(jié)

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

、使用css float并排顯示 - TOP

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

加float浮動(dòng)實(shí)現(xiàn)多個(gè)div并排顯示

這里我們對(duì)div通設(shè)一個(gè)浮動(dòng)，當(dāng)然實(shí)際使用時(shí)候，要通排顯示div對(duì)象的加入css類(lèi)，我們就對(duì)要同行顯示css選擇器設(shè)置浮動(dòng)。避免其它不需要設(shè)置的也被加入浮動(dòng)樣式。

今天我的項(xiàng)目使用如下：

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

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

法一、兩個(gè)div都設(shè)置 display: table-cell;

方法二、父級(jí)div設(shè)置 display: -webkit-box;

在線(xiàn)咨詢(xún)

上一篇：前端開(kāi)發(fā)：5款Bootstrap響應(yīng)式后臺(tái)管理模板，兼容不同屏幕分辨率
下一篇：HTML里h1~h6標(biāo)簽和p標(biāo)簽里的內(nèi)容不會(huì)自動(dòng)換行？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。