首頁技術文章正文

兩個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轉為行內(nèi)塊

使用display: inline-block將兩個盒子轉為行內(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;  /*轉為行內(nèi)塊兒 */
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            color: aliceblue;
            background-color: rgb(26, 135, 238);
        }

        .div2 {
            display: inline-block;  /*轉為行內(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轉為行內(nèi)塊之后，兩個行內(nèi)塊兒元素之間有縫隙。

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

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

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

IT培訓班



猜你喜歡：

CSS浮動元素有什么特點？

Css中如何清理浮動？

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

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

分享到：
在線咨詢 我要報名
和我們在線交談！