我目前正在使用带有2个底部对齐单元格的表来执行此操作。我对表格解决方案还可以,但是只是想知道是否可以(仅使用CSS和HTML,没有javascript)。

要求:
*文本和图像的大小未知,但是两者的组合宽度将不超过包含元素的宽度。 (例如,如果以后我要更改图像或文本,则不希望进入ccs文件)
*图像向左对齐,文本(实际上是水平列表)向右对齐。

编辑:为了回应Kos,

  • 文本和图像的大小是动态的,无论是高度还是宽度,但是两个元素的合并宽度将不超过包含元素的宽度。
  • 图像和文本应在底部对齐
  • 包含元素应与最高元素紧密配合。
  • 最佳答案

    HTML

    <div class="wrapper">
        <img src="" class="image" />
        <p class="text">Hello world!</p>
    </div>
    

    CSS
    .wrapper {
        position: relative;
        width: 500px;
    }
    
    .image {
        position: absolute;
        display: block;
        left:0;
        bottom: 0;
    }
    
    .text {
        position: absolute;
        right:0;
        bottom: 0;
    }
    

    编辑:我添加了适当的HTML代码。

    编辑2:如果包装器的高度未知(唯一的限制是.image必须始终高于.text)

    CSS
    .wrapper {
        position: relative;
        width: 500px;
    }
    .image {
        vertical-align: bottom;
    }
    
    .text {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    

    HTML
    <div class="wrapper">
        <img class="image" src="" />
        <p class="text">
            Hello world!
        </p>
    </div>
    

    09-25 20:05
    查看更多