Html 在不同的分区中排列两段

编辑：我已经找到了自己的解决方案。我已经把它贴在答题区了

我试图让底部的两段与另一个分区的一段对齐

这是一个p

这是一个较小的p


也是p

img div具有最小高度。左div和右div具有

显示：flex和
弯曲方向：列

我在考虑在左div中添加一个“somethinelse”div，以便在填充更多段落时更方便地使用它。但将其与右侧div中的段落对齐的问题仍然存在

我曾考虑在
顶部创建边距，这也是一个p
，但我担心在处理不同的浏览器大小时，它会打乱对齐

另一种解决方案是为每个
创建div，以便在div底部设置段落

我添加了一个jsifddle，它有一点不同：
要尝试使用CSS网格：


p{
保证金：0；
填充：0；
}
.集装箱{
显示：网格；
网格模板柱：1fr 1fr；
边框：1px红色虚线；
高度：自动；
}
.列--左{
显示：网格；
网格模板行：30px 260px；
栅隙：10px；
利润率：10px；
高度：自动；
边框：1px蓝色虚线；
}
.列--右{
显示：网格；
网格模板行：30px自动20px；
栅隙：10px；
利润率：10px；
边框：1px淡粉色；
}
.盒子{
边框：1件银色虚线；
身高：100%；
}

这是一个p

这是一个较小的p

也是p

一些文本

我自己的解决方案：

非常愚蠢，但我找到了一种方法，添加了一个

标记。不确定这是否是最好的做法，但它似乎做了我需要的一切

   <div class="div-below-img2">
          <br>
          <p>Also a p</p>
          <hr>
   </div>




也是p


你能附加一个JSFIDLE链接吗？当然，我刚刚把它编辑成这样会很好，因为它看起来不错，但我希望“还有一个p”与“这是一个较小的p”在同一行。要这样做，在你的意思是空的p标记之前添加一个空的p标记？是的，它是。如果您有一行文本，如果左列的第一个P标记，它将起作用。当我在“也是一个P”的顶部添加一个P时，它将不起作用。另外，左边的p标签可能会变大。如果发生这种情况，“也是p”仍然需要对齐。我想我必须使用div。你必须确保BR tag和P tag具有相同的填充和边距。如果你想将div分成两个固定高度的部分，你可以使用display:grid CSS prop并设置两行。然后为内部块溢出属性（隐藏和滚动）设置，为上部块设置文本换行：无换行；溢出：隐藏；文本溢出：省略号；flex和grid之间有什么区别？我现在主要使用flex，差别很大。CSS网格是一种使设计更加灵活和简单的新方法use@MaksimTikhonov对不起，你说的上层和内层是什么意思？
   <div class="div-below-img2">
          <br>
          <p>Also a p</p>
          <hr>
   </div>