英文:
How to float right only 2nd div in container and have it wrap when first div is too long
问题
文本框必须左对齐，使用 text-align 左对齐。
数字框必须右对齐，使用 text-align 右对齐。
它们应该并排存在，除非名称太长，此时数字框在行内换行。该行的所有数字应一起换行。每一行的名称长度都不同。
当数字框换行时，外部容器必须在垂直方向扩展，因为下面有一个边框，必须保持在数字下方，下一行有一个 margin-top，必须向下推动。
每行的两列数字必须在垂直方向对齐。
由于有很多行，数百行，应该尽量减少多余的标记，以保持渲染时间低。
如何实现第一个 div（文本）左对齐，第二个 div（数字集合）右对齐，保持列对齐，在空间不足时换行，并且以一种方式使其父容器在换行时垂直扩展？
英文:
I have rows that contain both text and data.
Text box must align to the left, with text-align left.
Numbers box must align to the right, with text-align right.
They should exist side by side unless the name is too long, at which point the numbers box wraps below within the row. all numbers for the row should wrap together. each name has a different length on each row.
When the numbers box wraps, the outer container must expand vertically because it has a border below it that must remain below the numbers, and the next row has a margin-top that must get pushed down.
The 2 columns of numbers for each row must align vertically for all rows.
Because there are so many rows, hundreds, it should minimize excess markup to keep rendering time low.
What I tried:
I tried using float, but float unbinds the div from the parent container, and won't cause the parent box to expand vertically when it wraps.
I tried using position with right:0px, but the numbers box won't wrap.
I tried using flex, but the numbers no longer align with the other rows because each text and numbers is a different length for each row.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<br />
<br />
<div class="container">
<div class="row">
<div class="rowName">short name</div>
<div class="rowData">
<div>000 xx</div>
<div>000 %</div>
</div>
</div>
<div class="row">
<div class="rowName">long name long name long name</div>
<div class="rowData">
<div>000 xx</div>
<div>0 %</div>
</div>
</div>
</div>
</body>
</html>
CSS
.container {
width: 300px;
}
.row {
width: 100%;
margin-top: 6px;
margin-bottom: 4px;
padding-bottom: 2px;
border-bottom: 1px solid #cccccc;
}
.row > div:nth-child(2) {
text-align: right; /* has no effect */
}
.row > .rowName {
display: inline-block;
}
.row > .rowData {
display: inline-block;
}
.row > .rowData > div {
display: inline-block;
width: 50px;
text-align: right
}
Similar questions have answers that do not solve for all requirements.
How can I achieve the 1st div (text) aligns left while the 2nd div (sets of numbers) aligns right, keeping the columns in line, wrapping when out of space, and in a way that causes its parent container to expand vertically with it wraps.
答案1
得分: 0
以下是翻译好的部分：
"You didn't post any expected result so I can only guess... Is this what you want?"
您没有发布任何期望的结果，所以我只能猜测...这是您想要的吗？
接下来是一些HTML和CSS代码，这部分不需要翻译。
英文:
You didn't post any expected result so I can only guess... Is this what you want?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
width: 300px;
}
.row {
width: 100%;
margin-top: 6px;
margin-bottom: 4px;
padding-bottom: 2px;
border-bottom: 1px solid #cccccc;
}
/* fix floated children taken out of parent's size */
.row::after {
content: '';
display: block;
clear: both;
}
.row>.rowName {
display: inline-block;
}
.row>.rowData {
display: inline-block;
float: right;
}
.row>.rowData>div {
display: inline-block;
width: 50px;
text-align: right
}
<!-- language: lang-html -->
<div class="container">
<div class="row">
<div class="rowName">short name</div>
<div class="rowData">
<div>000 xx</div>
<div>000 %</div>
</div>
</div>
<div class="row">
<div class="rowName">long name long name long name</div>
<div class="rowData">
<div>000 xx</div>
<div>0 %</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论