Divi主題是一款優(yōu)秀的

Divi主題如何實現(xiàn)博客列表拆分布局【圖左文右】？

其實我們只需要寫幾行CSS，然后博客里使用高級CSS類即可。

首先需要把下面的CSS放到主題選項里的自定義CSS里面：

@media only screen and ( min-width: 800px ) {

.dj_blog_list a img {

float: left;

width: 40%;

padding-right: 20px;

padding-bottom: 30px;

}

}

這里我們定義了一個新的CSS類：.dj_blog_list

然后我們轉(zhuǎn)到博客元素里的高級-CSS類，把dj_blog_list放入：

這個時候，你就發(fā)現(xiàn)基本實現(xiàn)了我們的目標。接下來我們優(yōu)化一些標題、元和樣式。

下面這些樣式都放在主題-自定義CSS樣式里。

標題樣式：

.et_pb_post h1 a, .entry-title {

font-size: 30px;

color: #000000;

font-weight: bold;

line-height: 1.3em;

}

元樣式：

.post-meta {

color: #000000;

font-size: 12px;

font-weight: bold;

letter-spacing: 1px;

text-transform: uppercase;

}

.post-meta a {

color: #000000;

font-size: 12px;

font-weight: bold;

letter-spacing: 1px;

text-transform: uppercase;

}

樣式：

.dj_blog_list a.more-link {

display: inline-block;

background: #000000;

font-weight: bold;

color: #ffffff;

width: 150px;

padding: 5px 10px;

text-align: center;

margin: 20px auto;

text-transform: uppercase;

letter-spacing: 1px;

border: solid 2px #000000;

}

.dj_blog_list a.more-link:hover {

background: #f9f9f9;

border: solid 2px #000000;

color: #000000;

}

現(xiàn)在就可以實現(xiàn)實現(xiàn)博客列表拆分布局【圖左文右】，和上圖展示的一樣。

總結

以上是生活随笔為你收集整理的html左文右图布局方法,Divi主题如何实现博客列表拆分布局【图左文右】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。