Question

我有这个html结构：

＆＃13;

.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;


}

＆＃13;

<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>

＆＃13;

我希望段落p的日期位于div的底部，我尝试使用位置绝对和相对但我有一些问题，就像你在图像中看到的我该如何解决这个问题？

Answer 1

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

给你.grid-container一个高度（仅用于演示目的）

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

然后告诉＆＃39;容器＆＃39; 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/

Answer 2

试试这个：

<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>

这个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;
}

或在此处运行：https://jsfiddle.net/ur4jb9pc/ 基本上是：

使用position：relative
使用position：absolute
设置底部的子p：0

Css：div底部的段落

2 个答案: