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

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

css html

阅读 10.4k

3 个回答

myhff

<!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>

图片描述