1. 程式人生 > >CSS實現橫列布局的方法總結

CSS實現橫列布局的方法總結

屬性 F12 child png pos position width end ges

一、使用float實現橫列布局的方法

如下面所示:DIV1和DIV2都可以選擇向左或者向右浮動50%來實現展示在同一行

div1 div2

實現下面圖片中布局的css樣式如下:

技術分享

分析:

1、第一行第一個圖片和最後一個圖片的左右邊距是10px,中間圖片的左右邊距是5px。布局如下:

 <section class="active_div1">
        <div>
            <img id="active_div11" src="">
        </div>
        <div>
            <
img id="active_div12" src=""> </div> <div> <img id="active_div13" src=""> </div> </section>

.active_div1 div {
    float: left;
    width: 33.33%;
    box-sizing: border-box;
}
 
.active_div1 div:nth-child(1) {
    padding-left
: 10px; } .active_div1 div:nth-child(3) { padding-right: 10px; } .active_div1 div:nth-child(2) { padding: 0 5px; }

2、第二行只有中間圖片的最有邊距是5px;布局如下:

<section class="active_div2">
        <div>
            <img id="active_div21" src="" onclick="imgClick(this)"
> </div> <div> <img id="active_div22" src="" onclick="imgClick(this)"> </div> <div> <img id="active_div23" src="" onclick="imgClick(this)"> </div> </section>

.active_div2 div {
    width: 33.33%;
    float: left;
    box-sizing: border-box;
}
 
.active_div2 div:nth-child(2) {
    padding: 0px 5px;
}

·

註意:使用box-sizing: border-box後如果沒有其他樣式,所有的塊將全部貼在一起,中間是沒有任何間距的。這也是一個很經典的布局

二、使用display:inline-block

display:inline-block大多數用於行塊的轉換,不建議使用此屬性來進行行列布局。因為inline-block不能完全代替float

技術分享

紅框中的布局就是使用display:inline-block最經典的布局。

<header id="consume_h">
       <span>已過期為消費不退款</span>
        <span>免預約</span>
</header>

.consume_h  span {
    display: inline-block;
}
 
.consume_h  span:before {
    content: "\f120";
    display: inline-block;
    margin-right: 5px;
    margin-left: 10px;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

此處使用了偽類,關於偽類的定義是使用後面會有專門的筆記來記錄,這裏就不贅述了。

此出還有一個經典的布局:

技術分享

這種布局一般是:
<div>
            <img src="" alt="">
            <p>
    測試勿拍
            </p> 
</div>

使用定位position:absolute常用於左邊固定,右邊自適應的情況。
  1. 對div進行相對定位
  2. 對img進行絕對定位
  3. p進行相對定位
註:固定寬度列的高度>自適應寬度列?

三、使用flexible box實現 真正意義上的流體布局

這種方法本人還沒有真正在實際操作中體驗過,此處先記錄下來~

CSS實現橫列布局的方法總結