0
我有一個基本的網格網格 - 在一種設計中，我熱衷於將文本定位在底部。我遇到的問題是在這種類型的塊上設置一個類，它將使用100％的高度的全部寬度 - 然後將絕對底部的文本定位。將CSS文本定位到底部
//它是什麼樣子目前
//什麼，我想，以確保它看起來像
標記看起來像這樣
<div class="element-container ant-col-xs-24 ant-col-sm-12 ant-col-md-6" style="position: absolute; left: 614px; top: 300px;">
<div class="element-wrapper">
<div class="contents-wrapper">
<div class="title">We are always here to help</div>
<div class="contents">
<div>
<p class="white-text absolute-bottom">When to seek support call 0202 000 000</p>
</div>
</div>
</div>
<div class="contents-background">
<img class="small" src="http://www.dustydavis.com/wp-content/uploads/2017/05/Home-Buying-1.jpg"></div>
</div>
</div>
</div>
scss
.elements {
.element-container{
width: 200px;
.element-wrapper{
background: #ffffff;
border: 1px solid black;
height: 280px;
margin:10px;
.contents-wrapper{
position: relative;
z-index: 1;
.title{
padding:10px;
background: #676766;
color: #ffffff;
}
.contents{
padding:10px;
}
}
.contents-background{
margin:10px;
position: absolute;
left: 1px;
bottom: 1px;
right: 1px;
top: 1px;
overflow: hidden;
z-index: 0;
img{
&
&.small{
width: auto;
height: 100%;
}
}
}
}
}
}
我已經有了一個基礎的jsfiddle
http://jsfiddle.net/0ht35rpb/111/
.demowrap{
\t width: 600px;
\t height: 600px;
position: relative;
\t border:1px solid red;
}
.elements {
}
.element-container{
width: 280px;/*demo width*/
}
.element-wrapper{
background: #ffffff;
border: 1px solid black;
height: 280px;
margin:10px;
}
.contents-wrapper{
\t position: relative;
\t z-index: 1;
}
.contents-wrapper .title{
\t padding:10px;
\t background: #676766;
\t color: #ffffff;
}
.contents-wrapper .contents{
\t padding:10px;
}
.contents-background{
margin:10px;
position: absolute;
left: 1px;
bottom: 1px;
right: 1px;
top: 1px;
overflow: hidden;
z-index: 0;
}
.contents-background img.large{
\t width: 100%;
\t height: auto; \t \t \t \t
}
.contents-background img.small{
\t width: auto;
\t height: 100%; \t \t \t \t
}
<div class="demowrap">
<div class="element-container ant-col-xs-24 ant-col-sm-12 ant-col-md-6" style="position: absolute; left: 0px; top: 0px;">
<div class="element-wrapper">
\t <div class="contents-wrapper">
\t \t <div class="title">We are always here to help</div>
\t \t <div class="contents">
\t \t \t <div>
\t \t \t \t <p class="white-text absolute-bottom">When to seek support call 0202 000 000</p>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="contents-background">
\t \t <img class="small" src="http://www.dustydavis.com/wp-content/uploads/2017/05/Home-Buying-1.jpg"></div>
\t </div>
</div>
<div class="element-container ant-col-xs-24 ant-col-sm-12 ant-col-md-6" style="position: absolute; left: 300px; top: 0px;">
<div class="element-wrapper">
\t <div class="contents-wrapper">
\t \t <div class="title">Unaffected sister block</div>
\t \t <div class="contents">
\t \t \t <div>
\t \t \t \t <p>Another demo block that just stays unaffected</p>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
</div>
</div>
很抱歉，但我爲你試圖完成什麼有點困惑。你的小提琴不符合你目前所擁有的，並且沒有提及任何粉紅色元素。你只是想把文字對齊到圖像的底部？ –
- 是的 - 只是試圖將文本對齊到底部 - 但是這個CSS是跨其他塊共享的 - 這不會在底部方面捕捉到這個特徵。 jsfiddle沒有考慮scss？ - 粉紅色的設計更多的來自實際的設計參考 - 但我擔心的是切換標記/添加一個類或以上，以實現這種影響 - 乾淨 –
@ObsidianAge - 剛更新我的演示 - 兩個姐姐塊 - 一看將文本定位到底部 - 其他部分保持不變。 –