如何将文本与对角线图像对齐

一位 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 中测试此代码