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

兩個div在同一行顯示CSS如何實現(xiàn)?

更新時間:2021-12-16 來源:黑馬程序員 瀏覽量:

我們在寫頁面的時候經(jīng)常會遇到需要將兩個div盒子同行顯示的情況,那么“兩個Div同行顯示”該如何顯示呢?一般兩個div同行顯示可以用float: left和display: inline_block來實現(xiàn),下面我們分別介紹。

首先我們先來看,沒有同行顯示的兩個div什么顯示效果。

兩個div默認狀態(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:浮動

通過浮動使兩個div在同一行顯示,兩個div同時左浮動(float: left)或者有浮動(float: right)。

左浮動后兩個div居中

CSS樣式:

.div1 {
    float: left;    /* 添加左浮動 */
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    color: aliceblue;
    background-color: rgb(26, 135, 238);
}
.div2 {
    float: left;    /* 添加左浮動 */
    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將兩個盒子轉(zhuǎn)為行內(nèi)塊,實現(xiàn)兩個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>兩個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)塊兒讓兩個div居中

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

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

元素被當(dāng)成行內(nèi)元素排版的時候,元素之間的空白符(空格、回車換行等)都會被瀏覽器處理,根據(jù)white-space的處理方式(默認是normal,合并多余空白),我們這里是因為div1和div2兩個盒子代碼的之間的"回車"被處理成為了縫隙。我們將兩個div的代碼寫在一行就可以解決了,如下:

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

IT培訓(xùn)班



猜你喜歡:

CSS浮動元素有什么特點?

Css中如何清理浮動?

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!