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

2022-09-15 15:36:17 字數 2468 閱讀 9543

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

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

分析：

<


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 .active_div1 div:nth-child(1) .active_div1 div:nth-child(3) .active_div1 div:nth-child(2)

<


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 .active_div2 div:nth-child(2)
注意：使用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 .consume_h  span:before
此處使用了偽類，關於偽類的定義是使用後面會有專門的筆記來記錄，這裡就不贅述了。

此齣還有乙個經典的布局：

這種布局一般是：

<


div>


<


img 


src=""


alt=""


>


<


p>


測試勿拍


p>


div>
使用定位position:absolute常用於左邊固定，右邊自適應的情況。

對div進行相對定位

對img進行絕對定位

p進行相對定位

注：固定寬度列的高度》自適應寬度列？

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

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

css布局總結（一）

1.一列定寬，一列自適應 兩列在同一行 第乙個元素必須脫離或半脫離文件流 右邊一列要佔滿剩餘的寬度 塊級元素寬高會自動預設充滿剩下螢幕 預設左邊先顯示 float margin float bfc 有重要內容先顯示 右側先 float 負外邊距 右側主體自適應區塊 左側定寬200px區塊 先顯示的放...

CSS 三欄布局方法總結

其中，左右分別為100px，中間自適應。html class left leftdiv class right rightdiv class center centerdiv css container float div container float left container float c...

CSS常用布局實現方法

css 布局對我來說，既熟悉又陌生。我既能實現它，又沒有很好的了解它。所以想總結一下，梳理一下 css 中常用的一列，兩列，三列布局等的實現方法。本文小白，僅供參考。但也要了解下浮動，定位等。一 一列布局 1.居中定寬 這算是最簡單且最容易實現的布局了吧。列出最核心的 css body head,m...