Alb*_*afe 5 html css text-alignment
如何使 INSIDE 这个样式元素的文本与左下角对齐？我只希望框中的文本位于框的左下角。文本的其余部分应该不受影响。
我是新手，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
您可以通过两种方式做到这一点，一种是使用 CSS 定位技术，您需要在其中将父元素设置为position: relative;和子元素为position: absolute;
演示 （使用span元素包装文本）
.box > span {
position: absolute;
bottom: 0;
left: 0;
}
或者使用display: table-cell;与vertical-align: bottom;
演示 （标记没有变化）
.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;
| 归档时间： |
|
| 查看次数： |
24189 次 |
| 最近记录： |