Saya mempunyai baris yang mengandungi teks dan data.
Kotak teks mesti dijajarkan ke kiri dan penjajaran teks ke kiri. Kotak nombor mesti dijajarkan ke kanan dan teks dijajarkan ke kanan.
Ia harus wujud bersebelahan, melainkan nama itu terlalu panjang, dalam kes ini kotak nombor akan dibalut dalam baris. Semua nombor dalam baris hendaklah dibungkus bersama. Setiap nama mempunyai panjang yang berbeza pada setiap baris.
Apabila kotak nombor dibalut, bekas luar mesti mengembang menegak kerana terdapat sempadan di bawahnya yang mesti kekal di bawah nombor, dan baris seterusnya mempunyai margin atas yang mesti ditolak ke bawah.
2 lajur nombor dalam setiap baris mesti dijajarkan secara menegak dalam semua baris.
Oleh kerana terdapat banyak baris, beratus-ratus daripadanya, penandaan berlebihan harus diminimumkan untuk memastikan masa rendering pendek.
Apa yang saya cuba:
Saya cuba menggunakan float, tetapi float membuka ikatan div daripada bekas induk dan tidak menyebabkan kotak induk mengembang menegak pada balut.
Saya cuba menggunakan kedudukan right:0px tetapi kotak nombor tidak berbungkus.
Saya cuba menggunakan flex, tetapi nombor tidak lagi sejajar dengan baris yang lain kerana setiap teks dan nombor pada setiap baris adalah panjang yang berbeza.
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
}
Jawapan kepada soalan yang serupa tidak dapat memenuhi semua keperluan.
Bagaimanakah saya boleh mencapai div pertama (teks) untuk dijajar ke kiri dan div kedua (kumpulan nombor) dijajarkan ke kanan, memastikan lajur dijajar, membalut apabila tidak cukup ruang dan entah bagaimana menyebabkan bekas induknya mengembang menegak.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda tidak menyiarkan sebarang keputusan yang dijangkakan, jadi saya hanya boleh meneka... adakah ini yang anda mahukan?
.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 }<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>