DIV CSS 佈局教程網

在印刷業中, 常用的文字圖片混搭的排版法被延伸到了Web視覺設計中, 如何來完成呢? 網頁教學網

這裡說的並不是簡單的文字包圍圖片, 不過原理很類似, 同樣是通過float屬性來完成效果的. 先看一看效果圖:

網頁教學網

這應該不是簡單的圖片float能完成的了吧?

不過實現的原理還是不是很推薦, 因為有相當多的額外標簽, 整份文檔看起來並不是非常語義化.

說歸說, 示例代碼還是要給出來的.

Html代碼如下:

網頁教學網

<div class="wrap_area">
<img src=/School/UploadFiles_7810/201603/20160324091038545.jpg" class="no_border" alt="Lunar eclipse photo" />

<div class="shape_wrap">
<div style="width: 250px;"></div>
<div style="width: 280px;"></div>
<div style="width: 305px;"></div>
.
.
.
</div>

<p>Numerous blocks of text</p>
.
.
.
</div> 網頁教學網

CSS代碼大致如下:

.Com

div.wrap_area { position: relative; }
div.wrap_area img { position: absolute; left: 0px; top: 0px; }
div.wrap_area p { position: relative; }

div.shape_wrap div { float: left; clear: left; height: 20px; }

CSS掌握的不錯的同學們應該就已經知道其中的奧妙了, 同樣是利用 float 將div部分內容提出文檔流, 然後等於是挖人工河一樣, 用div的堆砌造出一條正文要通過的 "渠道". 網頁教學網

適合於純視覺化設計的效果