如何將文本與對角線圖像對齊

一位 OSTraining 客戶要求一種方法來對齊對角線圖像旁邊的文本，同時保持兩個元素之間的空間。

我的第一個想法是在文本的特定點添加斷線，但這不起作用，因為該網站是響應式的。

在與客戶交談後，我們提出了一個更優雅的解決方案......

用例

在這個例子中，文本需要左對齊，圖像右對齊。 這裡真正的挑戰是文本不能覆蓋圖像。 我們想要的結果如下圖所示：

解決方案

我們可以使用動態寬度值添加浮動在右側的空 div，以強製文本不覆蓋圖像。 請注意，在此示例中，圖像是使用 CSS 添加為背景的。

的HTML

此示例的 HTML 如下所示：

 <div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <p>A buch of dummy text goes here...</p> </div>

您可以注意到具有間距類的多個空 div。 這些元素與一些 CSS 結合生成文本和圖像之間的間距。

間距 div 的數量等於填充圖像高度所需的文本行數。 在此示例中，圖像需要覆蓋 14 行。

CSS

為了更好地解釋，我將把所需的 CSS 分成幾個部分。

 #container {  background-image: url(bg.png);  background-repeat: no-repeat;  background-position: right top;  background-size: 300px auto;  min-height: 300px; }

將圖像定義為具有特定位置和大小的背景。

 #container p {  line-height: 22px;  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 14px; }

#container p選擇器引用文本。 定義 font-size 和 line-height 以稍後計算其他屬性的值非常重要。

 .spacing {  float: right;  clear: right;  height: 22px; }

此屬性告訴空 div 浮動在右側。 請注意， height的值與我們在段落中用於line-height的值相同。

 .spacing:nth-child(1) {  width: 305px; } .spacing:nth-child(2) {  width: 283px; } .spacing:nth-child(3) {  width: 261px; } .spacing:nth-child(4) {  width: 239px; } .spacing:nth-child(5) {  width: 217px; } .spacing:nth-child(6) {  width: 195px; } .spacing:nth-child(7) {  width: 173px; } .spacing:nth-child(8) {  width: 151px; } .spacing:nth-child(9) {  width: 129px; } .spacing:nth-child(10) {  width: 107px; } .spacing:nth-child(11) {  width: 85px; } .spacing:nth-child(12) {  width: 63px; } .spacing:nth-child(13) {  width: 41px; } .spacing:nth-child(14) {  width: 19px; }

上面的代碼是可能需要使用計算器的有趣部分。

為.spacing:nth-child(1)選擇的寬度值將應用於具有間距類的第一個 div，以同樣的方式.spacing:nth-child(2)定義稍小的寬度，依此類推，直到到達間距元素14 號。

將動態值從高到低定義到右側每個空 div 的原因可以使文本與左側對齊而不覆蓋圖像。

話雖如此，我們如何計算每個空 div 的寬度？ 答案需要一個基於以下值的小公式：

• 文本的行高（在我的示例中為 22px）
• 背景尺寸（本例中為 300 像素）

第一個空 div 的寬度是 305 像素，這是定義的背景寬度加上 5 個額外像素的值，我決定包括以避免文本太靠近圖像的邊緣。

響應式支持

使用示例代碼，該設計在任何屏幕尺寸下都能正常工作。 查看演示並調整瀏覽器大小以查看它的實際效果。

查看演示

獎金：少

直接使用 CSS 的一種替代方法是 LESS。 如果您不熟悉 LESS，我們有一個教程。

您可以使用 LESS 生成相同的結果，從而輕鬆地為每個具有間距類的 div 創建多個寬度值，而無需擔心數學問題。

 @textHeight: 22px; @backgroundWidth: 300px; @extraSpacing: 5px; @initialWidth: @backgroundWidth + @extraSpacing; @textLines: @backgroundWidth / @textHeight;

通過變量確定文本的高度和背景寬度。

 #container {    background-image: url(bg.png);    background-repeat: no-repeat;    background-position: right top;    background-size: @backgroundWidth auto;    min-height: @backgroundWidth; }

容器的屬性。

 #container p {    line-height: @textHeight;    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;    font-size: @textHeight - 8; } .spacing {    float: right;    clear: right;    height: @textHeight; }

基於一些變量動態計算的文本和間距屬性。

 .generate-spacing(@i, @end) when (@i <= @end) {    .spacing:nth-child(@{i}) {        width: @initialWidth - ((@i - 1) * @textHeight);    }    .generate-spacing((@i + 1), @end); } .generate-spacing(1, @textLines);

為所有空 div 生成動態寬度的循環。

在 Codepen 中測試此代碼