CSS 如何保持文本之间的间距保持不变，无论是 2 行还是 1 行文本

Question

我目前有一张图片、主文本和子文本，它们之间有一行分隔符，如下所示。

Picture1    Picture2
Main Text1     Main  
__________     Text2
Sub Text1   _________   
Sub Text2

所有内容都在div容器中。图片和主文本在div1中，行和子文本在div2 中

如果文本越来越长，主文本将换行到第二行。

我的问题是，我怎样才能使线&无论主文本是2行还是像下面这样的1行，子文本都保持在相同的位置。

Picture1    Picture2
Main Text1     Main  
Text2
________   _________   
Sub Text1   Sub Text2

谢谢

Answer 1

尝试在div1上使用min-height，例如min-height: 200px;！

Answer 2

您可以在flex:中使用flex

.container {
display: flex;
}
.container .item{
border: 1px dotted red;
width: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container .div2 {
border-top: 1px solid black;    
}

<div class="container">
<div class="item">
<div class="div1">
<div>image</div>
maintext
</div>
<div class="div2">
subtext
</div>
</div>

<div class="item">
<div class="div1">
<div>image</div>
maintext<br>maintext
</div>
<div class="div2">
subtext
</div>
</div>
</div>

Answer 3

这里有一个快速的例子：

<div style="border: 1px solid red; min-height: 200px; position: relative;">
<p>Content on top</p>
<div style="border: 1px dashed blue; position: absolute; bottom: 0; width: 100%;">
<p>Content @ the bottom!</p>
</div>
</div>

Answer 4

.table{width:200px ; height: 100px; margin: 50px auto 0 auto;}
.picture1{width: 75px; height: 50px; float: left;padding:0 50px 0 0;font: 15px tahoma;}
.picture2{width: 75px; height: 50px; float: left;font: 15px tahoma;}
.çizgi{ border-bottom: 1px solid #333; margin: 10px 0 0 0;}

<div class="table">
<div class="picture1">Picture1 Main Text1
<div class="çizgi"></div>Sub Text 1   
</div>
<div class="picture2">Picture2 Main Text2
<div class="çizgi"></div>Sub Text 2   
</div>
</div>