简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
So schweben Sie nur das zweite Div nach rechts in einem Container und wickeln das erste Div ein, wenn es zu lang ist
P粉505917590
P粉505917590 2023-09-15 12:28:31
0
1
610

Ich habe Zeilen mit Text und Daten.

Das Textfeld muss links ausgerichtet sein und der Text muss links ausgerichtet sein. Das Zahlenfeld muss rechtsbündig und der Text rechtsbündig sein.

Sie sollten nebeneinander vorhanden sein, es sei denn, der Name ist zu lang. In diesem Fall wird das Zahlenfeld innerhalb der Zeile umbrochen. Alle Zahlen in der Reihe sollten zusammengepackt werden. Jeder Name hat in jeder Zeile eine andere Länge.

Wenn das Zahlenfeld umgebrochen wird, muss sich der äußere Behälter vertikal ausdehnen, da sich darunter ein Rand befindet, der unter der Zahl bleiben muss, und die nächste Zeile einen oberen Rand hat, der nach unten gedrückt werden muss.

Die 2 Zahlenspalten in jeder Zeile müssen in allen Zeilen vertikal ausgerichtet sein.

Da es viele Zeilen gibt, Hunderte davon, sollte redundantes Markup minimiert werden, um die Renderzeiten kurz zu halten.

Was ich versucht habe:

Ich habe versucht, Float zu verwenden, aber Float löst die Bindung des Div vom übergeordneten Container und führt nicht dazu, dass sich die übergeordnete Box beim Umbrechen vertikal ausdehnt.

Ich habe versucht, eine Position von rechts:0px zu verwenden, aber das Zahlenfeld wird nicht umbrochen.

Ich habe es mit Flex versucht, aber die Zahlen stimmen nicht mehr mit den anderen Zeilen überein, da jeder Text und jede Zahl in jeder Zeile eine andere Länge hat.

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
}

Antworten auf ähnliche Fragen können nicht alle Anforderungen erfüllen.

Wie kann ich erreichen, dass das erste Div (Text) linksbündig und das zweite Div (Zahlengruppe) rechtsbündig ausgerichtet ist, die Spalten ausgerichtet bleiben, umbrechen, wenn nicht genügend Platz vorhanden ist, und irgendwie bewirken, dass der übergeordnete Container vertikal erweitert wird?

P粉505917590
P粉505917590

Antworte allen(1)
P粉250422045
P粉2504220452023-09-16 09:05:03 1 Etage

您没有发布任何预期结果，所以我只能猜测...这是您想要的吗？

.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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！