0

我必须实施下一件事。

什么

图像和文本应固定在底部。它们也应该在一行上，但文本应该相对于图像高出 10 像素。没关系（因为img标签具有display: inline属性），但我无法处理这些文本内容。

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

我什至无法发出正确的搜索请求来找到我需要的东西。那里可以做什么？

4

3 回答 3

2

有几种方法可以做到这一点。如果它真的是文本，请尝试应用 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） display:inline-block 你应该这样写：

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

*第一行是老的Mozilla，口味问题，可以省略。zoom:1 和 *display:inline 用于旧的 IE（如 7 或 8）...它不是很有效的标记，但效果很好，所以，不用担心

于 2013-10-03T18:20:40.157 回答
1 
    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>
于 2013-10-03T20:00:04.847 回答
0

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

vertical-align: top;

找出JSFiddle和JSFiddle2之间的区别

于 2013-10-03T16:42:14.333 回答