<dt> <dd>造型
<dt> <dd>造型
提问于 2020-02-02 08:30:46
- 我现在拥有的是：
- 我想达到的目标是：
当左边的文字被分成两行时，
- 如果有可选的第二行，我希望这两行对齐，如
破门而入
两行:二线
- 如果没有第二行，我希望第一行在同一行上，第二行在左边。
破门
两行:一线
我也许可以用柔性盒实现这一点，但我不知道怎么做到的。
我尝试过的内容: 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;
}回答 1
Stack Overflow用户
发布于 2020-02-02 10:05:20
这就是你需要的吗？
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60024416
复制相关文章
相似问题
腾讯云开发者
