flex上的div文本對齊

如何對齊div以便兩個標籤具有相同的寬度並右對齊，並且兩個內容都在相同的位置開始。有些人建議float，但我不推薦浮動內容。有沒有這樣做的靈活方式。flex上的div文本對齊

<!DOCTYPE HTMML> 
<html> 
<body> 
    <div> 
     <div style="display: flex; flex-direction:row;"> 
      <div style="align: right; background: blue"> 
       Long label: 
      </div> 
      <div style="text-align: left; background: green"> 
       This is the content 
      </div> 
     </div> 

     <div style="display: flex; flex-direction:row;"> 
      <div style="align: right; background: blue"> 
       label: 
      </div> 
      <div style="text-align: left; background: green"> 
       This is the content 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2016-03-11 anivas

即使我給固定的寬度其不響應它。 – anivas

使用柔性盒... 否 ...除非您使用固定寬度值（無論它們是什麼）......否則非兄弟姐妹之間沒有寬度/高度均衡。

您需要給定其中一個元素的固定寬度值，然後讓其他元素用flex:1佔據剩餘空間。

.blue { 
 
    background: lightblue; 
 
    /* width: 150px; */ 
 
    flex: 0 0 150px 
 
} 
 
.green { 
 
    background: #bada55; 
 
    flex: 1; 
 
} 
 
.parent { 
 
    display: flex; 
 
}

<div class="parent"> 
 
    <div class="blue"> 
 
    Long label: 
 
    </div> 
 
    <div class="green"> 
 
    This is the content 
 
    </div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="blue"> 
 
    label: 
 
    </div> 
 
    <div class="green"> 
 
    This is the content 
 
    </div> 
 
</div>

來源

2016-03-11 10:20:48

這有助於感謝！ – anivas

爲什麼不是一類簡單地添加到內容和標籤的div？

HTML

<div> 
<div> 
    <div class="label-div">Long label</div> 
    <div class="content-div">Content</div> 
</div> 
<div> 
    <div class="label-div">Label</div> 
    <div class="content-div">Content</div> 
</div> 
</div>

CSS

.label-div { 
    width: 70px; 
    text-align: right; 
} 

.content-div { 
    text-align: left; 
}

這樣，你可以肯定的是所有的標籤div的長度相等。

來源

2016-03-11 10:17:02 Stephen

flex上的div文本對齊

回答

相關問題