雙列布局簡介

1. 前言

網(wǎng)站單列 + 列中內(nèi)容左圖右文的形式已經(jīng)可以滿足很多場景的需要了。
但是有時候我們并不想要左圖右文，左圖右文重點突出的是文字，圖片只是輔助。
而一些視頻類、電商類網(wǎng)站需要重點突出的并不是文字，而是圖片，這時候雙列布局就派上用場了。

2. 雙列布局

雙列布局抽象起來通常是這樣的：

由于現(xiàn)在的手機屏幕越來越大，可以容納更多的信息，于是一些網(wǎng)站將自己的布局設(shè)置為雙列的：

但此種布局最好以圖片為主，圖片占比較大，文字占比較小。這樣才能獲得較為清晰的顯示效果，文字通常是一句用來描述圖片的標題。

3. 實現(xiàn)手段

一方面我們可以利用現(xiàn)有的CSS中文庫：chinese-layout 來快速實現(xiàn)雙列布局：

• 中文布局 CSS 庫

這種方式不僅利于我們的學(xué)習(xí)，更加有助于我們的記憶。

然后也會帶領(lǐng)大家如何在不依賴于任何外界條件的情況下純手工實現(xiàn)雙列布局：

• 多列屬性法
• 左浮動法
• 絕對定位
• 彈性布局
• 網(wǎng)格布局
• 增光添彩

4. 小結(jié)

該種布局常見于電商網(wǎng)站、視頻網(wǎng)站等需要大量展示圖片的網(wǎng)站。
因為如果沒有圖片作為主要展示的話，雙列布局就會顯得比較亂，不容易突出主題。