我有这个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>





我想在日期的div底部添加段p,日期,我尝试使用绝对位置和相对位置,但是我遇到了一些问题,例如图像html - CSS:div底部的段落-LMLPHP
我怎样才能解决这个问题?

最佳答案

您将需要使用position:relative,以便div知道您将在该div中放置另一个元素。

给您的.grid-container高度(仅用于演示目的)

.grid-cotainer {
  display: grid;
  grid-template-columns: auto auto;
  height: 200px }


然后告诉'container'div .grid-right它需要相对定位。

.grid-right {
  border-bottom: 3px solid #f2f2f2;
  margin-bottom: 8px;
  padding-bottom: 4px;
  padding-left: 15px;
  position: relative }


然后,您可以使用所使用的position:absolute将其保留在底部。

.grid-right p:not(.not-at-bottom) {
  bottom: 0;
  position:absolute }


您甚至可以使用not。一个标识符,这样,如果您不想在p div内的底部放置.grid-right标记,它就不会这么做。

https://jsfiddle.net/9rdbd4j6/

10-07 19:12
查看更多