3つのDIVを別のDIVの内側に並べて、最後のDIVを右揃えにするにはどうすればよいですか？

Question

私はフォーマットしたい単純なリスト項目を持っています。それは3つのDIVを含んでいます。最初のDIVを正当化し、2番目のDIVを必要に応じて拡大し、3番目のDIVを右揃えにします。私は3つのDIVを並べて積み重ねていますが、最後のDIVを正しく正当化する方法を理解することはできません。これは、それが今のようになります。

.container { 
display: flex; 
} 

.left { 
width: 70px; 
} 

.center{ 
display: flex; 
} 

.right{ 
} 

Answer 1

使いやすいフレキシボックス、見てみましょう、とフレックス・エンドで最後にあなたのブロックを得るために速くなります。

<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

乾杯！

Answer 2

あなたは、以下のようなコードを使用することができます：

<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> 

これは私がそれを見えるようにしたいものです。

両側に幅divを設定し、流体幅を中央divに設定しました。

これはすべきことです。

.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

flexbox使用して、あなたはこれを行うことができます。

.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

あなたは、Li内のすべてのdivせずにそれを行うことができます...
はテーブルとしてあなたのリスト項目を表示し、スパンの内側にテーブルセル：

* { 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>

フレキシボックス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>