Question

我在文本旁边使用左浮动图像，行高为2.

如何将图像顶部对齐到文本顶部？

折叠由行高创建的空间（在。中用红色标记）截图）通过将行高减少到1或更小该文本不是该项目的选项。
这也将是网站中使用的默认样式的一部分因此，每次出现时手动调整保证金的内容不是可行的。
这不是一个案例。可能只有文字，只有文字图像，图像后跟文本，或文本后跟图像。文字可以是标题或段落。

有没有办法删除行高的顶部并加倍行高的底部？

Markup of issue

＆＃13;

.left {
  float:left;
}
.text {
  line-height:2;
}

＆＃13;

<div>
  <img class="left" src="https://placehold.it/60x60">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

＆＃13;

JSFiddle

虽然::first-line伪元素确实接近我的意思试图这样做，它不会降低Firefox中的行高也不行它在第一行和第二行之间提供正确的行高包裹时的文字行。见到这里：http://jsfiddle.net/Dqmu8/25/

Answer 1

你喜欢这个吗？

带图片

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="xs"
    version="2.0">

<xsl:template match="Items">
    <result>
        <xsl:value-of 
            select="for $pos in 1 to count(Item)
                    return sum(subsequence(Item, 1, $pos)/price)"
            separator=","/>
    </result>
</xsl:template>

</xsl:stylesheet>

.left {
  float:left;
  margin-top: 10px;
}
.text {
  line-height:2;
}
div img + .text {
  margin-top: -10px;
}

没有图片

<div>
  <img class="left" src="https://placehold.it/60x60">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

.left {
  float:left;
  margin-top: 10px;
}
.text {
  line-height:2;
}
div img + .text {
  margin-top: -10px;
}

Answer 2

看看这个。这是你需要的吗？

＆＃13;

.left {
  float:left;
  margin-top: .5em;
}
.text {
  line-height:2;
}

＆＃13;

<div>
  <img class="left" src="https://placehold.it/60x60">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

＆＃13;

Answer 3

这样的东西？

.left {
  float:left;
  margin-right: 10px;
}

.right {
  float: right;
  margin-left: 10px;
}

.content p {
  line-height: 2;
}

.content img {
  margin-top: 10px;
}

<div class="content">
  <img class="left" src="https://placehold.it/60x60">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p></p>
  <img class="right" src="https://placehold.it/60x60">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Answer 4

添加此样式：

.text {
  transform: translateY(-0.6em);
}

Fiddle

Answer 5

线高2将在线上方1/2 em和线下方1/2 em。因此，您只需要从文本的上边距中减去1/2 em，然后将其添加回图像。如果将图像放在文本的流程中，无论块类型如何，它都将起作用：

<强> <p>

.left {
  float:left;
  margin-top:.5em;
}
.text {
  line-height:2;
  margin-top:-.5em;
}

<div>
  <p class="text">
     <img class="left" src="https://placehold.it/60x60">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<强> <h1>

.left {
  float:left;
  margin-top:.5em;
}
.text {
  line-height:2;
  margin-top:-.5em;
}

<div>
  <h1 class="text">
     <img class="left" src="https://placehold.it/60x60">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </h1>
</div>

如何从文本顶部删除行高？

5 个答案: