Question

我正在尝试按下标题中的文字，以便每个字符的底部触及div的底部。几乎就像div的边框强调了每个字母。我怎么做到这一点？我基本上试图将文字按下几个像素。

Answer 1

实现此目的的一种方法是将容器的位置设置为relative，将子元素设置为absolute：

<div style="position:relative;height:200px;border:1px solid #ccc;">
    <div style="position:absolute;bottom:0px;left:0px;">
        I'm a bottom feeder...
    </div>
</div>

修改

为了澄清，我没有使用line-height，因为如果文本换行到新行，它的行为不正确。

请参阅此处了解不同技术的细分。特别注意使用相对与绝对定位的例子：

http://jsfiddle.net/c2tqZ/1/

Answer 2

http://jsfiddle.net/g835a/4/

的style.css

.header
{
    border: 1px solid red;
    height: 100px;
    position: relative;
}

#header-content { position: absolute; bottom: 0; left: 0; }

HTML：

<div class="header">
    <h1>Title</h1>
    <div id="header-content">Some content</div>
</div>

Answer 3

您遇到的“问题”是由字体引起的。通常，字体在字母下留出空间来说明诸如“j”和“g”之类的下行。您需要相应地调整底部属性的负值。

在magnum2002的小提琴中将底部值从0更改为-5，它可以正常工作。

Answer 4

CSS：

 text{
    vertical-align:baseline;
  }

那样的东西？

文本与绝对底部对齐

4 个答案: