Question

这是代码。我想在底部对齐文本

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px">
   <img width="174" height="116" src="#" style="margin-right:10px;float:left">
   <strong>Text 1</strong>, <br>
   text 2, <br>
   text 3 
</p>

添加了测试http://jsbin.com/ubiji/2

的示例

Answer 1

您的问题尚不清楚，但也许您希望文本的行为像一个块，并且“文本3”是与图像对齐的部分？

如果是这样，这应该有效：

    <p style="background:#eee;font-size:1.3em;color:#022662;height:116px;">

        <img width="174" height="116" src="#" style="margin-right:10px; vertical-align:bottom">
       
        <span style="display:inline-block; background: #ff6; vertical-align:bottom">
            <strong>Text 1</strong>, <br>
            text 2, <br>
            text 3
        </span>
    </p>

Answer 2

应该有一个简单的解决方案。没有。

这里有人说vertical-align：text-bottom或者vertical-align：bottom。像这样：

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;">
    <img width="174" height="216" src="#" style="vertical-align:bottom;margin-right:10px;">
    <strong>Text 1</strong>, <br>
    text 2, <br>
    text 3 
</p>

如果您只有一行文本，则可以按预期工作，因为它是与图像对齐的第一行文本。这是因为＆lt; img /＆gt;默认情况下显示：inline;。如果你只有一行，那就去吧。

如果您需要更强大的解决方案，请使用定位。

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;position:relative;">
    <img width="174" height="216" src="#" style="margin-right:10px;">
    <span style="position:absolute;bottom: 0;">
        <strong>Text 1</strong>, <br>
        text 2, <br>
        text 3 
    </span>
</p>

这适用于IE7标准模式和IE8标准模式。同样在Firefox等...请注意，左侧位置被省略，只是默认为没有位置的位置：绝对;

由于在IE6,7和8中在Quirks模式下hasLayout不成立，因此解决方案也不起作用。你必须通过给它一个高度或宽度的尺寸给它'布局'，或者只是回到旧的忠实缩放：1;

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;position:relative;zoom:1">
    <img width="174" height="216" src="#" style="margin-right:10px;">
    <span style="position:absolute;bottom: 0;">
        <strong>Text 1</strong>, <br>
        text 2, <br>
        text 3 
    </span>
</p>

你有它。

Answer 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLE</title>
</head>
<body>

<p>Here is your text
<img src="penseur.gif" width="70" height="137" align="bottom" alt="penseur">
at the bottom</p>

</body>
</html>

Answer 4

vertical-align可以成为您想要的吗？

http://www.w3schools.com/css/pr_pos_vertical-align.asp

<p style="background:#eee;font-size:1.3em;color:#022662;height:116p"">
<img width="174" height="116" src="#" style="margin-right:10px;float:left">
<div style="vertical-align:text-bottom">
<strong>Text 1</strong>, <br>
text 2, <br>
text 3
</div>
</p>

我认为你需要div。

如何将<p>底部的文字与<img/>对齐？</p>

4 个答案: