使用浮動將文字包含在圖片周圍

使用浮動將文字包裹在圖像周圍並清除包裹的元素。

要實現圖片向左浮動並讓下面的文字環繞它:

  1. 選擇覆蓋文字元素的圖像
  2. 存取「樣式」面板中的佈局配置
  3. 選擇左浮動選項
  4. 包含 填充 右側和底部用於圖像邊框和周圍內容之間的間距
 

將影像向右對齊時,請不要忘記合併左側和底部填充以實現間距。

清除封閉元素

要在包裝的組件上建立清晰的可見性:

  1. 選擇浮動組件下方的元素
  2. 存取“樣式”面板中的佈局設定
  3. 選擇所需的清除設定
 

透過浮動建造定制柱

您可以利用浮動來並排排列元素並佔據父容器的整個寬度,例如列部分。要製作帶有浮動的個人化列: 

  1. 將 div 區塊合併到畫布上 - 這將成為您的封套
  2. 在封套內新增 3 個 div 區塊
  3. 在最近新增的 3 個 div 區塊之一引入一個類
  4. 固定寬度為33.33%,並將浮動設定為左側
  5. 將相同的類別應用於剩餘的兩個 div 區塊

您也可以使用浮動將元素在父容器中向左或向右移動。該方法與上面描述的浮動圖像的方法保持一致。

Flexbox 可以更方便有效地處理前面提到的所有佈局職責。 了解有關使用 Flexbox 的更多資訊。

麥伊凡
Ewan Mak 的最新帖子 (看全部)