雙列布局簡介

1. 前言

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

2. 雙列布局

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

由于現在的手機屏幕越來越大，可以容納更多的信息，于是一些網站將自己的布局設置為雙列的：

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

3. 實現手段

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

• 中文布局 CSS 庫

這種方式不僅利于我們的學習，更加有助于我們的記憶。

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

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

4. 小結

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