Wie haben drei Elemente ein div, wobei das zentrale Element eine dynamische Breite hat?

Question

Ich versuche, eine Schnittstelle für einen Benutzer zu entwerfen, um entweder ein Präfix oder ein Suffix eines Wortes einzufügen. Im Idealfall wird das Wort (zufällig ausgewählt) in der Mitte des Wrappers angezeigt, und dann werden die Textfelder auf jeder Seite bis zu den Kanten des Wrappers gedehnt. Hier ist das Setup:

<div class="wrapper"> 
    <div class="left">{{text input}}</div> 
    <div class="center">{{dynamic content}}</div> 
    <div class="right">{{text input}}</div> 
</div> 

die so etwas wie die folgenden aussehen würde (wo Unterstrichen sind Texteingabefelder, Klein sind möglich Eingänge):

|________CONDITION________| => |____pre_CONDITION________| or |________CONDITION_al_____| 
|__________ALLOW__________| => |______dis_ALLOW__________| or |__________ALLOW_ance_____| 
|___________RUN___________| => |______over_RUN___________| or |___________RUN_ner_______| 

Ich habe ähnliche Probleme wie vorher gesehen, aber ich Ich habe keine Lösung für dieses Problem gefunden. Das zentrale div hat keine statische Breite, also kann ich nicht determine the widths manually. Ich brauche die linken und rechten divs, um tatsächlichen Inhalt (nicht nur Styling) zu enthalten, so kann ich nicht wirklich change the HTML. Ich suche nach einer Lösung, die es ermöglicht, dass die Mitte div jede Breite hat und die linken und rechten divs zwingt, den verbleibenden horizontalen Raum zu füllen.

Gibt es eine Möglichkeit, dies mit CSS zu tun? Vielen Dank für Ihre Zeit.

Answer 1

Verwenden flex

.wrapper { 
 
    display: flex; 
 
} 
 
.left, .right { 
 
    flex: 1; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
} 
 
.center { 
 
    flex: 0; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
}

<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content</div> 
 
    <div class="right">text input</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content, longer</div> 
 
    <div class="right">text input</div> 
 
</div>

Oder display: table

.wrapper { 
 
    display: table-row; 
 
} 
 
.left, .right { 
 
    display: table-cell; 
 
    width: 50%; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
} 
 
.center { 
 
    display: table-cell; 
 
    width: 1%; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
}

<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content</div> 
 
    <div class="right">text input</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content, longer</div> 
 
    <div class="right">text input</div> 
 
</div>