CSS：div底部的段落

Question

我有這個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，日期，我嘗試使用絕對和相對位置，但是我有一些問題，如您在圖片中看到的 我怎樣才能解決這個問題？

Answer 1

您將需要使用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 。 一個標識符，這樣，如果您不想在.grid-right div的底部放置p標記，它就不會這么做。

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/基本上：

• 設置父div的位置：相對
• 將子項p設置為位置：絕對
• 設置子p的底部為0