<dt> <dd> 造型

Question

• 我目前拥有的：

当前照片
当前代码笔

• 我想要实现的目标：

当左边的文字分成两行时，

1. 如果有可选的第二行，我希望两行都对齐，如

分为第一行
两行：第二行

如果没有第二行
2. ，我希望第一行与左边的第二行在同一行。

分为
两行：第一行

我可能可以通过弹性框实现这一点，但我不知道如何实现。

我尝试过的： .HTML

<dl class="list">
<dt class="imgText">    
<span>
<img src="https://eastereggs.svensoltmann.de/wp-content/uploads/opera_logo1.gif" alt="Payback">
</span>
<span class="text">This text will be broken to have two lines in smaller screens:  </span></dt>
<span class="values-container"> 
<dd class="dd">First line [always exists]<br>
Second line [Optional]
</dd>
</span>
</dl>

.CSS

.list {
}
.imgText{
float:  left;
max-width: 60%;
}
.imgText img {
max-width: 80px;
display: block;
}
.text {
display: inline;
}
.values-container {
display: flex;
flex-direction: column;
margin-left: 15%;
text-align: right;
}
.dd{
margin-left: 15%;
text-align: right;
}

Answer 1

这是你需要的吗？

.list {
display: flex;
justify-content: space-between;
}
.imgText {
display: flex;
justify-content: space-between;
max-width: 60%;
}
.imgText img {
max-width: 80px;
display: block;
}
.text {
margin-left: 10px;
}
.values-container {
display: flex;
flex-direction: column;
text-align: right;
}

<dl class="list">
<dt class="imgText">
<span>
<img
src="https://eastereggs.svensoltmann.de/wp-content/uploads/opera_logo1.gif"
alt="Payback"
/>
</span>
<span class="text">
This text will be broken to have two lines in smaller screens:
</span>
</dt>
<span class="values-container">
<dd class="dd">
First line [always exists]<br />
Second line [Optional]
</dd>
</span>
</dl>