[英]Aligning element absolute bottom inside floated container (with left and right floats)
[英]Aligning text to bottom left corner inside a styled-element
如何使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;
嘗試將目標文本包裝在范圍內:
<article class="box" style="background-color: #2672EC"><span class="bottom">foo bar</span>
然后你可以使用:
.box {
position: relative;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.