卡卡網(wǎng)

我們經(jīng)常看到這樣的網(wǎng)頁內(nèi)容排版：圖片被固定在某一個區(qū)域(div)內(nèi)，然后文字環(huán)繞著它。這要用到什么技術(shù)呢？Javascript？其實，只用純CSS就能實現(xiàn)，并且代碼超級簡單。

圖片漂浮固定在某DIV內(nèi)右下角

下面是代碼

HTML

<div class="wrapper">
  <div class="box">
    <div class="float"><img></div>
       文字內(nèi)容...
  </div>
</div>

CSS

.wrapper {
  display:flex;
  border:1px solid;
  overflow: hidden;
  resize: horizontal;
  margin-bottom:100px;
}
.box {
  text-align:justify;
  font-size:20px;
}
.float {
  float:right;
  height:100%;
  margin-left:15px;
  display:flex;
  align-items:flex-end;
  shape-outside:inset(calc(100% - 100px) 0 0);
}

execcodegetcode

代碼分析

1、我們需要一個wrapper（包裝）元素來包含所有內(nèi)容，我們在其上使用flexbox。Flexbox 允許我們依賴默認(rèn)stretch對齊方式以便以后使用height: 100%。

2、我們的.float元素將占據(jù)文本內(nèi)容旁邊的整個高度。在這個元素中，我們使用 flexbox 對齊將圖像推到底部。

3、shape-outside CSS 屬性定義了一個形狀——它可能是非矩形的——相鄰的內(nèi)聯(lián)內(nèi)容應(yīng)該環(huán)繞在它周圍。默認(rèn)情況下，內(nèi)聯(lián)內(nèi)容環(huán)繞其邊距框；shape-outside提供了一種自定義這種環(huán)繞方式的方法，從而可以將文本環(huán)繞復(fù)雜的對象而不是簡單的框。

換句話說，shape-outside設(shè)置內(nèi)容圍繞元素的邊界框流動的方式。

它需要多個值。其中之一是inset()功能，同樣，定義一個插入矩形。當(dāng)提供所有前四個參數(shù)時，它們表示從參考框向內(nèi)的頂部、右側(cè)、底部和左側(cè)偏移，這些偏移定義了插入矩形邊緣的位置。

因此，shape-outside: inset(calc(100% - X) 0 0)我們可以創(chuàng)建一個剛好從圖像頂部開始的插入矩形。頂部等于100% - X，其中X是圖像高度，100%是.float元素的高度。這允許文本在圖像頂部的可用空間內(nèi)換行。這是響應(yīng)式的，而且我們可以輕松地在左右之間切換（通過調(diào)整float屬性）。

想要更多？

通過設(shè)置shape-outside屬性，我們可以得到更多圖像位置和不同形狀的展示。

demodownload

demodownload

demodownload

demodownload

demodownload

demodownload

標(biāo)簽: css  css3  image  右下角廣告