CSS之多個div一行排列

本文轉載自查看原文 2022-01-14 10:40 1870 前端與設計

　　使多個div橫着排的兩種方法，一種是浮動float，一種是布局display

　　一、使用float

　　元素一旦浮動，脫離文檔流（不占頁面空間，后面未浮動元素會上前補位。

　　1、代碼示例

<!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>測試</title>
</head>
<body>
  <div class="box">
    <div class="child-1"></div>
    <div class="child-2"></div>
    <div class="child-3"></div>
  </div>
</body>
<style>
    .box {
        width: 800px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: skyblue;
    }

    .child-1 {
        width: 50px;
        height: 50px;
        background-color: green;
        float: left;
    }
    .child-2 {
        width: 50px;
        height: 50px;
        background-color: yellow;
        float: left;
    }
    .child-3 {
        width: 50px;
        height: 50px;
        background-color: red;
        float: left;
    }
</style>
</html>

View Code

　　2、float引發問題

　　　　2.1）父元素高度坍塌：

　　　　父元素不寫高，靠子元素撐起高度，所有子元素都浮動，那么所有子元素都脫離文檔流，父元素認為自己內部沒有元素了，所以父元素就沒有高度了。

　　　　解決方法：

　　　　a、父元素也浮動。缺點是影響父元素后的非浮動元素

　　　　b、給父元素寫高度。缺點是有時我們並不知道父元素的高度

　　　　c、overflow：hidden。缺點是會讓真正要溢出不能顯示

　　　　d、直接在父元素里面增加一個塊級元素。沒有內容、沒有高度。缺點是莫名多了一個div，不好維護。

<div class="box">
    <div class="child float-left"></div>
    <div class="child float-left"></div>
    <div class="clear"></div>
<div>

.clear {
    clear: both
}
.float-left {
　　float: left
}

　　e、父元素利用偽元素:after，並且清除浮動（推薦）

<div class="box">
    <div class="child float-left"></div>
    <div class="child float-left"></div>
<div>

.box::after {
    display: block;
    content: '';
    clear: both
}

　　　　2.2）子元素高度不一致時，浮動位置錯亂

　　　　如圖黑色div本應該在綠色div的下面，解決方法是使用display布局

<!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>測試</title>
</head>
<body>
  <div class="box">
    <div class="child-1"></div>
    <div class="child-2"></div>
    <div class="child-3"></div>
    <div class="child-4"></div>
  </div>
</body>
<style>
    .box {
        width: 180px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: skyblue;
    }

    .child-1 {
        width: 50px;
        height: 50px;
        background-color: green;
        float: left;
    }
    .child-2 {
        width: 50px;
        height: 80px;
        background-color: yellow;
        float: left;
    }
    .child-3 {
        width: 50px;
        height: 50px;
        background-color: red;
        float: left;
    }
    .child-4 {
        width: 50px;
        height: 50px;
        background-color: black;
        float: left;
    }
</style>
</html>

View Code

　　二、使用display

　　display常用屬性：

　　a、inline，使元素變成行內元素，行內元素共享一行，沒有寬高屬性

　　b、block，使元素變成塊級元素，獨占一行

　　c、inline-block，理解為不獨占一行的塊級元素

　　1、代碼示例

<!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>測試</title>
</head>
<body>
  <div class="box">
    <div class="child-1"></div>
    <div class="child-2"></div>
    <div class="child-3"></div>
  </div>
</body>
<style>
    .box {
        width: 800px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: skyblue;
    }

    .child-1 {
        width: 50px;
        height: 50px;
        background-color: green;
        display: inline-block;
    }
    .child-2 {
        width: 50px;
        height: 50px;
        background-color: yellow;
        display: inline-block;
    }
    .child-3 {
        width: 50px;
        height: 50px;
        background-color: red;
        display: inline-block;
    }
</style>
</html>

View Code

　　可以看到三個子元素之間有縫隙，這是由於換行引起的，去除方法是在父元素添加 font-size:0

　　演示去除縫隙，並且子元素高度不一致不會引起布局錯亂

<!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>測試</title>
</head>
<body>
  <div class="box">
    <div class="child-1"></div>
    <div class="child-2"></div>
    <div class="child-3"></div>
    <div class="child-4"></div>
  </div>
</body>
<style>
    .box {
        width: 180px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: skyblue;
        font-size: 0;
    }

    .child-1 {
        width: 50px;
        height: 50px;
        background-color: green;
        display: inline-block;
    }
    .child-2 {
        width: 50px;
        height: 80px;
        background-color: yellow;
        display: inline-block;
    }
    .child-3 {
        width: 50px;
        height: 50px;
        background-color: red;
        display: inline-block;
    }
    .child-4 {
        width: 50px;
        height: 50px;
        background-color: black;
        display: inline-block;
    }
</style>
</html>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS 讓div,span等塊級、非快級元素排列在同一行 div探索系列（二）：讓多個div顯示在一行（浮動的div） DIV橫向排列_CSS如何讓多個div盒子並排同行顯示 DIV+CSS如何讓圖片和文字在同一行！ DIV+CSS 讓同一行的圖片和文字對齊同一個DIV內多個P標簽合並到同一行；且不同的DIV之間換行 CSS---div一行顯示，超出以省略號代替 css，使兩個在同一行內的display:inline-block的div頂部對齊。一行 CSS 代碼的魅力 html 如何讓兩個div在同一行