suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So erstellen Sie mit Flexbox eine Spanne basierend auf der Breite des Inhalts

<p>Ich habe span und div in einem übergeordneten Flex-Row-Element mit fester Breite verwendet</p> <p><br /></p> <pre class="brush:css;toolbar:false;">.parent { Anzeige: Flex; Flexrichtung: Reihe; Breite: 230px; Hintergrundfarbe: blau; } .child1 { Hintergrundfarbe: rot; } .child2 { Mindestbreite: 40 Pixel; }</pre> <pre class="brush:html;toolbar:false;"><div class="parent"> <span class="child1">Dies ist ein Text in span</span> <div class="child2"/> </div></pre> <p><br /></p> <p>Ich möchte, dass der Span immer die gleiche Breite wie der Text hat und das Div die gesamte verbleibende Breite des übergeordneten Elements einnimmt. Wenn nun der Text in eine neue Zeile verschoben wird (wie Sie im Codeausschnitt sehen können), ist der rote Hintergrundbereich breiter als der Text. Wie kann dieser Code behoben werden? Ich brauche, dass der rote Hintergrund genau am Rand des Textes endet</p>
P粉726234648P粉726234648474 Tage vor491

Antworte allen(1)Ich werde antworten

  • P粉147747637

    P粉1477476372023-08-16 00:16:31

    也许你可以将parent设置为网格并使用fr单位进行测量?

    grid-template-columns: fit-content, 1fr

    这将使文本容器的宽度与文本的确切宽度相同,并使剩余的容器占据剩余空间的1份(没有其他容器会占据100%的空间)。

    对于行显示,只需将columns更改为rows。

    Antwort
    0
  • StornierenAntwort