如何將3個DIV並排排列在另一個DIV中並右對齊最後一個DIV？

Question

我有一個簡單的列表項目，我想格式化。它包含3個DIV。我想讓第一個DIV左對齊，第二個DIV能夠根據需要增長，第三個DIV右對齊。我有三個DIV並排堆放，但我無法弄清楚如何讓最後一個DIV右對齊。這是它看起來像現在：

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

這就是我想要它看起來像：

.container { 
display: flex; 
} 

.left { 
width: 70px; 
} 

.center{ 
display: flex; 
} 

.right{ 
} 

Answer 1

看看Flexbox的，易於使用，並與柔性到底會快結束時，讓您的塊。

<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

您可以使用如下代碼的下方。

您的固定寬度divs在兩邊和一箇中心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

你可以不用在李德全的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>

Flexbox的可選擇性

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