简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Bagaimana untuk mengapungkan hanya div kedua ke kanan dalam bekas dan membalut div pertama jika terlalu panjang
P粉505917590
P粉505917590 2023-09-15 12:28:31
0
1
652

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.

P粉505917590
P粉505917590

membalas semua(1)
P粉250422045
P粉2504220452023-09-16 09:05:03 Tingkat 1

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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！