Wie richtet man 3 DIV nebeneinander in einem anderen DIV aus und rechtfertigt den letzten DIV?

Question

Ich habe ein einfaches Listenelement, das ich formatieren möchte. Es enthält 3 DIVs. Ich möchte, dass der erste DIV gerechtfertigt bleibt, dass der zweite DIV nach Bedarf wachsen kann und dass der dritte DIV richtig begründet ist. Ich habe die drei DIVs nebeneinander gestapelt, aber ich kann nicht herausfinden, wie ich den letzten DIV richtig ausrichten kann. Dies ist, wie es jetzt aussieht:

<li *ngFor="let script of scripts" [class.selected]="script === selectedScript" (click)="onSelect(script)"> 
     <div class="container"> 
     <div class="left"> 
      <span class="badge">{{script.scriptOrderID}}</span> 
     </div> 
     <div class="center"> 
      <span>{{script.scriptName}}</span> 
     </div> 
     <div class="right"> 
      <span class="badge2">{{script.scriptID}}</span> 
     </div> 
     </div> 
    </li> 

Das ist, was ich will es so aussehen:

.container { 
display: flex; 
} 

.left { 
width: 70px; 
} 

.center{ 
display: flex; 
} 

.right{ 
} 

Answer 1

Werfen Sie einen Blick auf Flexbox, einfach zu bedienen und mit Flex-End wird es schnell sein, Ihre Blöcke am Ende zu bekommen.

<div class="line"> 
    <div class="first_block"> 

    </div> 
    <div class="text"> 
     Hello 
    </div> 
    <div class="second_block"> 

    </div> 
</div> 


.line { 
    height : 40px; 
    width : 100%; 
    display : flex; 
    flex-flow : row wrap; 
    background-color : gray; 
} 

.first_block, .second_block { 
    background-color : blue; 
    width : 40px; 
} 

.text { 
    flex-grow : 1; 
} 

JSFIDDLE, um Ihnen das Ergebnis zu zeigen.

Prost!

Answer 2

Sie einen Code verwenden, wie unten kann.

Sie haben auf beiden Seiten feste DIV-Werte und einen mittleren DIV mit Flüssigkeitsbreite.

Das sollte den Trick tun.

.container > div { 
 
float: left; 
 
padding: 0 10px; 
 
} 
 

 
.left{ 
 
width: 30px; 
 
} 
 
.right { 
 
width: 30px; 
 
} 
 

 
.center { 
 
width: calc(100% - 120px); 
 
background: #ccc; 
 
}

<div class="container"> 
 
     <div class="left"> 
 
      <span class="badge">23</span> 
 
     </div> 
 
     <div class="center"> 
 
      <span>test</span> 
 
     </div> 
 
     <div class="right"> 
 
      <span class="badge2">44</span> 
 
     </div> 
 
     </div>

Answer 3

Mit flexbox Sie können dies tun:

.container { 
 
    line-height: 50px; 
 
    background: #e1e1e1; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.center { 
 
    flex: 1; 
 
} 
 
.badge, 
 
.badge2 { 
 
    display: block; 
 
    background: purple; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 0 15px; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <span class="badge">*</span> 
 
    </div> 
 
    <div class="center"> 
 
    <span>The Name will grow</span> 
 
    </div> 
 
    <div class="right"> 
 
    <span class="badge2">**</span> 
 
    </div> 
 
</div>

Answer 4

Sie es tun können, ohne alle divs in der li ...
Zeigen Sie Ihre Liste-Element als Tabelle, und die Spanne des Inneren als table-cell:

* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } 
 

 
ul { 
 
    width: 100%; 
 
} 
 

 
li { 
 
    width: 100%; 
 
    display: table; 
 
    margin-bottom: 2px; 
 
} 
 
li > span { 
 
    display: table-cell; 
 
    background: lightgrey; 
 
} 
 
li > span:first-child, 
 
li > span:last-child { 
 
    background: black; 
 
    color: white; 
 
    width: 3em; 
 
}

<ul> 
 
    <li> 
 
    <span>60</span> 
 
    <span>Click Add a Printer</span> 
 
    <span>53</span> 
 
    </li> 
 
    <li> 
 
    <span>70</span> 
 
    <span>Click "The printer I want isn't listed"</span> 
 
    <span>54</span> 
 
    </li> 
 
    <li> 
 
    <span>80</span> 
 
    <span>Select "Add a printer using a TCP/IP address or hostname" Click Next</span> 
 
    <span>55</span> 
 
    </li> 
 
</ul>

Flexbox alternativ

* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } 
 

 
ul { 
 
    width: 100%; 
 
} 
 

 
li { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    justify-content: space-between; 
 
    margin-bottom: 2px; 
 
} 
 
li > span { 
 
    background: lightgrey; 
 
    flex-grow: 1; 
 
} 
 
li > span:first-child, 
 
li > span:last-child { 
 
    background: black; 
 
    color: white; 
 
    width: 3em; 
 
    flex-grow: 0; 
 
}

<ul> 
 
    <li> 
 
    <span>60</span> 
 
    <span>Click Add a Printer</span> 
 
    <span>53</span> 
 
    </li> 
 
    <li> 
 
    <span>70</span> 
 
    <span>Click "The printer I want isn't listed"</span> 
 
    <span>54</span> 
 
    </li> 
 
    <li> 
 
    <span>80</span> 
 
    <span>Select "Add a printer using a TCP/IP address or hostname" Click Next</span> 
 
    <span>55</span> 
 
    </li> 
 
</ul>