gpt4 book ai didi

html - 将文本与样式元素内的左下角对齐

转载 作者:搜寻专家 更新时间:2023-10-31 08:18:47 25 4
gpt4 key购买 nike

如何使此样式元素内的文本与左下角对齐?我只希望框内的文本位于框的左下角。其余文本应该不受影响。

我是 CSS 的新手,无法理解。

HTML

<body>
<h1>example text</h1>
<article class="box" style="background-color: #2672EC">foo bar</article>
<h1>example text</h1>
</body>

CSS

body {
font-family: Verdana;
font-size: 16px;
color: black;
}

.box {
height: 187px;
width: 187px;
margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;
color: white;

}

这是 JSFiddle

http://jsfiddle.net/J9hT5/8/

最佳答案

您可以通过两种方式实现,一种是使用 CSS 定位技术,您需要将父元素设置为 position: relative; 并将子元素设置为 position: absolute;

Demo (使用 span 元素包装文本)

.box > span {
position: absolute;
bottom: 0;
left: 0;
}

或者通过使用 display: table-cell;vertical-align: bottom;

Demo (标记没有变化)

.box {
height: 187px;
width: 187px;
margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;
color: white;
display: table-cell;
vertical-align: bottom;
}

另外,想稍微重构一下你的 CSS,下面的代码片段

margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;

可以写成margin: 5.5px 5.5px 5.5px 5.5px;

关于html - 将文本与样式元素内的左下角对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21671292/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com