文本和图片怎样底部对齐?

不懂就要问
  • 489

感觉很简单的东西但是就是一直没正确的做出来。
我先描述一下我想做的效果是:
比如说是有3个部分,左边一张图,右边分为上下两行文字,我想让右边的两行文字,分别和左边的图片顶部对齐和底部对齐,顶部对齐很简单,但是底部对不齐。我看网上说的把右下部分的那行文字display:table-cell然后vertical-align: bottom;底部对齐,虽然底部对齐了,但是内容宽度变窄了,跟display:inline-block差不多的效果了,,,
我之前给右上的文字加margin-bottom或者padding-bottom把下面那排文字挤下去,但是也只是视觉上的对齐了,但也不是绝对的底部对齐
我想问问还有没有其他的简单办法可以做成底部对齐啊?

回复
阅读 8.8k
3 个回答
myhff
  • 238
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test</title>
    <style>
    /* 方法一 */
    /*
    img {border:1px solid red;}
    .s1 {border:1px solid black;}
    .s2 {border:1px solid blue;}
    div {border:1px solid purple;}
    img {float:left;}
    .s2 {display:block; line-height:266px;}
    div {height:161px; width:500px; overflow:hidden;}
    */

    /*方法二*/
    img {border:1px solid red;}
    .s1 {border:1px solid black;}
    .s2 {border:1px solid blue;}
    div {border:1px solid purple;}
    img {float:left;}
    .s2 {position:absolute; bottom:0; left:161px;}
    div {height:161px; width:500px; position:relative;}
    </style>
</head>
<body>
    <div>
        <!--图片大小160x160-->
        <img src="img.jpg" />
        <span class="s1">第一行文字</span>
        <span class="s2">第二行文字</span>
    </div>
</body>
</html>

图片描述

如果不用flex 能想到的就是绝对定位吧- -以上两位都说了

宣传栏