將元素浮動到底角

需要在右側或左側佈置一個元素，以使文本包裹在其周圍嗎？對於Float屬性來說，這是一項簡單的任務。但是，如果您還想將該元素（讓我們稱為圖像）將其推向底部的一個角落之一，那又如何呢？聽起來有些棘手，對吧？我們可能需要JavaScript？

不，很少有（棘手的）CSS可以做到！這是僅CSS的解決方案，無論大小和內容的尺寸和內容如何，​​都可以使您的圖像粘在底角。

調整包裝元素的大小，並看到工作中的魔力：

讓我們剖析代碼。

標記和佈局

我們需要包含所有內容的包裝元素，並且我們將在其上使用Flexbox。 Flexbox使我們能夠依靠默認的拉伸對齊方式來以後使用高度：100％。

 <div>
  <div>
    <div> <img  alt="將元素浮動到底角" > </div>
    lorem ipsum dolor ...
  </div>
</div>

 .wrapper {
  顯示：Flex;
}

。漂浮 {
  浮點：對；
  身高：100％；
  顯示：Flex;
  準項目：flex-end;
  Shape -Outside：插圖（計算（100％-100px）0 0）;
}

.wrapper中的.box是我們的flex項目。我們不需要將任何特定的CSS應用於盒子。它定義了包裝紙的高度，同時將其延伸到相同的高度。這種行為將為我們提供一個“參考高度”，可以由子元素使用。

從規範中：

如果彈性項目具有對齊的自我：strave，重做其內容的重做佈局，則將使用的尺寸視為其確定的交叉大小，以便可以解決百分比大小的孩子。

關鍵字是確定的，它允許我們安全地使用框元素內部的百分比（％）高度。

現在用於浮動元素

由於上面詳細介紹的高度計算，我們的.float元素將佔據文本內容旁邊的整個高度。在此元素內部，我們使用Flexbox對齊將圖像推到底部。

現在，使用Shape-Outside屬性來實現真正的技巧。這是MDN定義的方式：

Shape-Outside CSS屬性定義了一個形狀（可能是非矩形），相鄰內聯內容應包裝。默認情況下，內聯內容包裹在其邊距框上； Shape-Outside提供了一種自定義此包裝的方法，使得可以將文本包裹在復雜的對像上，而不是簡單的框上。

換句話說，Shape-Outside設置了內容在元素的邊界框中流動的方式。

它需要多個值。其中之一是插圖（）函數，它再次根據MDN：

定義一個插圖矩形。當提供前四個參數的所有參數時，它們代表了從參考框內的頂部，右，底部和左側偏移，該框中定義了插圖矩形邊緣的位置。

因此，使用Shape -Outside：Intset（calc（100％-x）0 0），我們可以創建一個插圖矩形，該矩形正好從圖像的頂部開始。頂部等於100％-x，其中x是圖像高度，100％是.float元件的高度。這允許文本包裹在圖像頂部的自由空間內。這是響應迅速的，加上我們可以輕鬆地在左右之間切換（通過調整Float屬性）

就是這樣！唯一的主要警告是您需要知道圖像高度。

讓我們優化標記

我們仍然可以稍微優化代碼，並刪除圖像周圍的額外包裝器。

 <div>
  <div>
    <img  alt="將元素浮動到底角" >
    lorem ipsum dolor ...
  </div>
</div>

然後我們的CSS將成為

.wrapper {
  顯示：Flex;
}

。漂浮 {
  浮點：對；
  身高：100％；
  寬度：100px;
  Shape -Outside：插圖（CALC（100％-100px / *高度 * /）0 0）;
  對象擬合：包含；
  對象位置：底部；
}

由於我們刪除了額外的包裝器，因此我們需要另一種技術將圖像放在底角。為此，我們使用對象擬合和對象位置，但必須明確指定圖像的寬度。

使用此方法，我們需要知道圖像的寬度和高度與以前僅需要高度的代碼不同。

想要更多嗎？

我們可以進一步擴展這個概念，以說明更典型的情況。例如，我們可以將圖像向右浮動，但是將其固定在盒子的中間，並以合理性為中心：中心：還將插圖矩形從插圖（calc（100％-x）0 0）更改為插圖（calc（50％-x/2）0 0 0 0 0 0），將插圖矩形調整到中間。

我們還可以在兩個底角上浮動兩個圖像：

這裡沒什麼複雜的。我只是兩次使用相同的浮動元件，一次在右側，然後在左側。當我們可以將圖像放在所有四個角落時，為什麼要在兩個角落停下來：

同樣的基本想法也在這裡發揮作用，但是我們也依靠頂級圖像的共同浮點功能。但是，您會注意到這是該概念開始分解的地方，並且根據包含框的大小，我們會得到一些不必要的溢出。我們可以使.float元素的高度大於100％，並應用一些“魔術數”，從而通過調整圖像的填充和邊距來平滑事物。

您是否知道Shape-Outside接受Radial-Gradient（）作為值？我們可以使用它放置如下：

梯度的透明部分是文本可以進行的可用空間。您可能已經註意到，我們也將邊界拉迪烏斯應用於圖像。 Shape-Outside屬性將簡單地影響.float元素，我們需要手動調整圖像的形狀，以遵循由Shape-Outside定義的形狀。

當我們使用時，讓我們將其與先前的示例結合起來，該示例使用Justify-content：中心將圖像固定到盒子的垂直中心：

另一種徑向級別（）以及另一種邊框 - 拉迪烏斯配置。

我們本可以使用線性級別（）而不是為包裝區域形成三角形形狀：

這是我們用於徑向級別（）的想法。最大的區別是，我們使用剪貼式路徑而不是Border-Radius來剪裁我們的圖像。

而且，由於我們為其他人做了，所以讓我們使用Justify-content：中心想法將圖像固定到盒子右邊緣的垂直中心：

我們在上面的演示中使用了圓錐分子（），並帶有形狀外側，以定義三角形的形狀和夾子路徑以在圖像上獲得相似的形狀

在圖像具有裝飾性的情況下，所有這些示例仍然可以使用較少的代碼進行優化（對於SEO目的而言，HTML內部不需要時）。讓我們用偽元素替換.float元素，然後將圖像應用於背景：

我們正在使用蒙版來顯示所需的圖像的部分，並且猜猜它使用與Shape-Outside相同的值！因此，我們要做的就是定義形狀的一個值。

就是這樣！

這裡有很多可能性不僅在拐角處放置矩形，而且要使用任何相同的代碼結構，在任何位置上的任何形狀。我們只需要：

• 調整Shape-Outside屬性以定義形狀
• 在圖像上應用一些樣式以遵循先前定義的形狀或在使用偽元素版本的情況下對掩碼應用相同的值

然後，即使在響應式設計中，一切都將其放置。

以上是將元素浮動到底角的詳細內容。更多資訊請關注PHP中文網其他相關文章！