如何对齐 div，使两个标签具有相同的宽度并右对齐，并且两个内容都从同一位置开始。有些人建议使用 float，但我不喜欢 float 内容。有没有一种灵活的方式来做到这一点。
<!DOCTYPE HTMML>
<html>
<body>
<div>
<div style="display: flex; flex-direction:row;">
<div style="align: right; background: blue">
Long label:
</div>
<div style="text-align: left; background: green">
This is the content
</div>
</div>
<div style="display: flex; flex-direction:row;">
<div style="align: right; background: blue">
label:
</div>
<div style="text-align: left; background: green">
This is the content
</div>
</div>
</div>
</body>
</html>
最佳答案
使用 flexbox...NO...除非您使用固定宽度值(无论它们是什么)，否则您不能...非同胞之间没有宽度/高度均衡。
您需要为其中一个元素指定固定宽度值，然后使用 flex:1 让另一个元素占据剩余空间。
.blue {
background: lightblue;
/* width: 150px; */
flex: 0 0 150px
}
.green {
background: #bada55;
flex: 1;
}
.parent {
display: flex;
}<div class="parent">
<div class="blue">
Long label:
</div>
<div class="green">
This is the content
</div>
</div>
<div class="parent">
<div class="blue">
label:
</div>
<div class="green">
This is the content
</div>
</div>关于html - flex 上的 div 文本对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35937253/