一、使用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常用于左邊固定，右邊自適應的情況。

對div進行相對定位

對img進行絕對定位

p進行相對定位

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

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

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

轉載于:https://www.cnblogs.com/gunelark/p/7284044.html

總結

以上是生活随笔為你收集整理的一、CSS实现横列布局的方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。