教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

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

更新時(shí)間:2021年12月16日14時(shí)07分 來源:傳智教育 瀏覽次數(shù):

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

首先我們先來看，沒有同行顯示的兩個(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)

通過浮動(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í)候，元素之間的空白符（空格、回車換行等）都會(huì)被瀏覽器處理，根據(jù)white-space的處理方式（默認(rèn)是normal，合并多余空白），我們這里是因?yàn)閐iv1和div2兩個(gè)盒子代碼的之間的"回車"被處理成為了縫隙。我們將兩個(gè)div的代碼寫在一行就可以解決了，如下：

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


猜你喜歡：

CSS如何清除浮動(dòng)？清除浮動(dòng)的方法有哪些？

塊級元素、行內(nèi)元素和行內(nèi)塊元素各自特點(diǎn)和區(qū)別

傳智教育前端開發(fā)高手班課程

0 分享到：
和我們在線交談！