html - 将不同div中的两个段落对齐

Question

编辑:我为此找到了自己的解决方案。我已将其发布在答案部分。

我正在尝试将底部的两个段落与另一个 div 中的一个段落对齐。

<div class="left-div">
   <div class="img">
      <img src=img>
   </div>
   <div class="below-img-div">
      <p>This is a p</p>
      <p>this is a smaller p</p>
      <hr>
   </div>
</div>
<div class="right-div">
   <div class="img">
      <img src=img>
   </div>
   <div class="div-below-img2">
          <p>Also a p</p>
          <hr>
   </div>
   <div class="something-else">
   </div>
</div>

img div 具有最小高度。 left-div 和 right-div 有 display: flex;和 flex-direction: column;
我正在考虑向左 div 添加一个“其他”div，以便在我用更多段落填充它时更容易。但是将它与右侧 div 中的段落对齐的问题仍然存在。

我想过在 <p>Also a p</p> 的顶部创建边距但恐怕在处理不同浏览器大小时会弄乱对齐方式。

其他解决方案是为每个 <p> 制作 div。为了在div的底部设置段落。

我添加了一个 jsifddle，它有点不同: https://jsfiddle.net/8wxome41/

Answer 1

要进行此尝试，请使用 CSS 网格:

p {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px dashed red;
  height: auto;
}

.column--left {
  display: grid;
  grid-template-rows: 30px 260px;
  grid-gap: 10px;
  margin: 10px;
  height: auto;
  border: 1px dashed blue;
}

.column--right {
  display: grid;
  grid-template-rows: 30px auto 20px;
  grid-gap: 10px;
  margin: 10px;
  border: 1px dashed pink;
}

.box {
  
  border: 1px dashed silver;
  height: 100%;
 }

<div class="container">

  <div class="column--left">
     <!-- row #1 30px -->
     <div class="box">
        <img src=img>
     </div>
     <!-- row #2 260px -->
     <div class="box">
        <p>This is a p</p>
        <p>this is a smaller p</p>
     </div>
  </div>
  
  <div class="column--right">
     <!-- row #1 30px -->
     <div class="box">
        <img src=img>
     </div>
     
     <!-- row #2 auto height -->
     <div class="box">
            <p>Also a p</p>
     </div>
     
     <!-- row #3 20px -->
     <div class="box">
      <p>some text</p>
     </div>
  </div>
</div>