在網(wǎng)頁設(shè)計(jì)中，布局對于頁面的美觀程度和用戶體驗(yàn)非常重要。CSS作為前端設(shè)計(jì)必備技能，不僅可以美化整個(gè)網(wǎng)頁，還可以實(shí)現(xiàn)各種炫酷的效果。

上圖是一種常見的布局方式，也被稱為圖下文子。該布局方式在新聞類網(wǎng)站中很常見，它可以很好地展示不同主題和內(nèi)容的圖片和文字組合。
實(shí)現(xiàn)這種布局方式，我們需要使用CSS中的浮動和定位屬性。首先我們需要固定圖片的寬度和高度，然后使用float屬性將其浮動到左側(cè)或右側(cè)。最后使用position屬性將文字框定位到圖片下方。
具體代碼如下：
<div class="img-wrap">
<img src="example.png" alt="圖下文子">
</div>
<p class="text-wrap">這里是文字內(nèi)容</p>
CSS樣式：
.img-wrap{
float: left; /*左浮動*/
width: 200px;
height: 200px;
margin-right: 10px; /*設(shè)置圖片與文字的間距*/
}
.text-wrap{
position: relative; /*相對定位*/
top: 200px; /*將文字框定位到圖片下方*/
}
上述代碼僅為示例，具體樣式可以根據(jù)需要進(jìn)行調(diào)整，比如可以添加邊框、陰影等效果。