[英]Css: paragraph at bottom of a div
i have this html structure: 我有这个HTML结构:
.grid-container { display: grid; grid-template-columns: auto auto; } .grid-left { border-bottom: 3px solid #f2f2f2; margin-bottom: 8px; padding-top:4px; padding-bottom:4px; } .grid-right{ border-bottom: 3px solid #f2f2f2; margin-bottom: 8px; padding-bottom:4px; padding-left: 15px; } .sub-grid-container { display: inline-grid; grid-template-rows: 26px auto auto; border-bottom: 3px solid #f2f2f2; margin-bottom: 8px; padding-bottom: 4px; padding-top: 3px; } .grid-text{ padding-top: 10px; font-size: 13px; color: #505050; }
<div class="grid-container"> <div class="grid-left"> <div class="sub-grid-container"> <div class="negozio"> Amazon</div> <div class="img">Image</div> <div class="fill"></div> </div> </div> <div class="grid-right"> some text here .... <p> Date xx/xx/xx</p> </div> </div>
I want to have the paragraph p with the date at the bottom of the div, i tried using position absolute and relative but i have some problem like you see in the image 我想在日期的div底部放置段p,日期,我尝试使用绝对和相对位置,但是我有一些问题,如您在图片中看到的 how can i fix this? 我怎样才能解决这个问题?
You will need to use position:relative
so that the div knows you are going to position another element inside that div. 您将需要使用position:relative
以便div知道您将在该div中放置另一个元素。
Give your .grid-container
a height (just for demo purposes) 给您的.grid-container
一个高度(仅出于演示目的)
.grid-cotainer {
display: grid;
grid-template-columns: auto auto;
height: 200px }
Then tell the 'container' div .grid-right
it needs relative positioning. 然后告诉'container'div .grid-right
它需要相对定位。
.grid-right {
border-bottom: 3px solid #f2f2f2;
margin-bottom: 8px;
padding-bottom: 4px;
padding-left: 15px;
position: relative }
Then you can use what you used, position:absolute
to keep it at the bottom. 然后,您可以使用所使用的position:absolute
将其保持在底部。
.grid-right p:not(.not-at-bottom) {
bottom: 0;
position:absolute }
You could even make use of not
. 您甚至可以利用not
。 An identifier so that if you do not want to place a p
tag at the bottom inside your .grid-right
div, it knows not to. 一个标识符,这样,如果您不想在.grid-right
div的底部放置p
标记,它就不会这么做。
https://jsfiddle.net/9rdbd4j6/ https://jsfiddle.net/9rdbd4j6/
Try this: 尝试这个:
<div class="grid-container">
<div class="grid-left">
<div class="sub-grid-container">
<div class="negozio"> Amazon</div>
<div class="img">Image</div>
<div class="fill"></div>
</div>
</div>
<div class="grid-right"> some text here ....
<p> Date xx/xx/xx</p>
</div>
</div>
And this CSS: 而这个CSS:
.grid-container {
display: grid;
grid-template-columns: auto auto;
}
.grid-left {
border-bottom: 3px solid #f2f2f2;
margin-bottom: 8px;
padding-top: 4px;
padding-bottom: 4px;
}
.grid-right {
position: relative;
border-bottom: 3px solid #f2f2f2;
margin-bottom: 8px;
padding-bottom: 24px;
padding-left: 15px;
}
.grid-right p {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
.sub-grid-container {
display: inline-grid;
grid-template-rows: 26px auto auto;
border-bottom: 3px solid #f2f2f2;
margin-bottom: 8px;
padding-bottom: 4px;
padding-top: 3px;
}
.grid-text {
padding-top: 10px;
font-size: 13px;
color: #505050;
}
Or run it here: https://jsfiddle.net/ur4jb9pc/ Basically: 或在这里运行: https : //jsfiddle.net/ur4jb9pc/基本上:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.