首頁(yè)技術(shù)文章正文

兩個(gè)div在同一行顯示CSS如何實(shí)現(xiàn)？

更新時(shí)間:2021-12-16 來(lái)源:黑馬程序員 瀏覽量:

我們?cè)趯?xiě)頁(yè)面的時(shí)候經(jīng)常會(huì)遇到需要將兩個(gè)div盒子同行顯示的情況，那么“兩個(gè)Div同行顯示”該如何顯示呢?一般兩個(gè)div同行顯示可以用float: left和display: inline_block來(lái)實(shí)現(xiàn)，下面我們分別介紹。

首先我們先來(lái)看，沒(méi)有同行顯示的兩個(gè)div什么顯示效果。

兩個(gè)div默認(rèn)狀態(tài)

代碼： 

<div class="div1">div1</div>
<div class="div2">div2</div>

CSS樣式： 

.div1 {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    color: aliceblue;
    background-color: rgb(26, 135, 238);
}
.div2 {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    color: aliceblue;
    background-color: rgb(7, 194, 178);
}

方法1：浮動(dòng)

通過(guò)浮動(dòng)使兩個(gè)div在同一行顯示，兩個(gè)div同時(shí)左浮動(dòng)（float: left）或者有浮動(dòng)（float: right）。

左浮動(dòng)后兩個(gè)div居中

CSS樣式： 

.div1 {
    float: left;    /* 添加左浮動(dòng) */
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    color: aliceblue;
    background-color: rgb(26, 135, 238);
}
.div2 {
    float: left;    /* 添加左浮動(dòng) */
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    color: aliceblue;
    background-color: rgb(7, 194, 178);
}

方法2：display: inline-block轉(zhuǎn)為行內(nèi)塊

使用display: inline-block將兩個(gè)盒子轉(zhuǎn)為行內(nèi)塊，實(shí)現(xiàn)兩個(gè)div同行顯示。

代碼： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兩個(gè)div盒子一行顯示</title>
    <style>
        .div1 {
            display: inline-block;  /*轉(zhuǎn)為行內(nèi)塊兒 */
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            color: aliceblue;
            background-color: rgb(26, 135, 238);
        }

        .div2 {
            display: inline-block;  /*轉(zhuǎn)為行內(nèi)塊兒 */
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            color: aliceblue;
            background-color: rgb(7, 194, 178);
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

效果

行內(nèi)塊兒讓兩個(gè)div居中

注意：使用display: inlien-block轉(zhuǎn)為行內(nèi)塊之后，兩個(gè)行內(nèi)塊兒元素之間有縫隙。

產(chǎn)生縫隙的原因：

元素被當(dāng)成行內(nèi)元素排版的時(shí)候，元素之間的空白符（空格、回車(chē)換行等）都會(huì)被瀏覽器處理，根據(jù)white-space的處理方式（默認(rèn)是normal，合并多余空白），我們這里是因?yàn)閐iv1和div2兩個(gè)盒子代碼的之間的"回車(chē)"被處理成為了縫隙。我們將兩個(gè)div的代碼寫(xiě)在一行就可以解決了，如下： 

<div class="div1">div1</div><div class="div2">div2</div>

IT培訓(xùn)班



猜你喜歡：

CSS浮動(dòng)元素有什么特點(diǎn)？

Css中如何清理浮動(dòng)？

什么是塊元素？什么是行內(nèi)元素？

黑馬程序員web前端開(kāi)發(fā)高手班課程

分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！