Question

我必须实施下一件事。

What

图像和文字应固定在底部。它们也应该在一行上，但文本相对于图像应该是10px。一切都好（因为img标签有display: inline属性），但我不能处理这些文本。

如果我将文字放在带有position: absolute; bottom: 0的div中，它会与图像重叠。如果我将它设为position: relative; float: left;，它将不会固定在块的底部。另外，我无法将position: absolute属性设置为图像的宽度left，因为它可能会有所不同。

我甚至无法提供正确的搜索请求来查找我需要的内容。那可以做些什么？

Answer 1

有几种方法可以做到这一点。如果它真的是文本，请尝试应用css：

.text{line-height:200px}
/*you can adjust the line-hight to best suit your needs (100px or whatever)*/

你也可以在文本中应用style =“display：inline-block”，这样你就可以使用边距和填充（例如margin-bottom：10px \ padding-bottom：10px等），请注意，对于跨浏览器（包括旧IE）显示：内联块你应该写这样的东西：

.text{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding-bottom:10px;
}

*第一行是针对老mozilla，品味问题，可以省略。 zoom：1和* display：inline适用于旧的IE（如7或8）...它不是很有效的标记，但工作完美，所以，不用担心

Answer 2

    body, p, div{
    margin:0px;
    padding:0px;
    }
    div{
        position:relative;
        background:blue;
    }
    img{
        background:red;
        display:inline;
        width:200px;
        height:200px;
        margin-right:20px;

    }
    p{
        display:inline;
        position:absolute;
        bottom:10px;
    } 



    <body>
      <div id='x'>
        <img src='image'/>
        <p> Text </p>
      </div>
    </body>

Answer 3

不要使用绝对定位，并尝试将以下css添加到文本

vertical-align: top;

找出JSFiddle和JSFiddle2

之间的区别

带文字的一行上的图像和文字（但文字移动了一点）

3 个答案: