CSS：文本框應尊重左側div寬

Question

我有一個標題和內容的結構。我喜歡這個內容尊重標題的寬度。基本上這樣的：

| Title:   Lorem ipsum dolor sit amet, consectetur adipiscing elit. | 
|    Praesent augue ex, dapibus quis vulputate ut, bibendum | 
|    vitae felis. Nunc tempor elit leo.      | 
|                   | 
| This is a long title: Lorem ipsum dolor sit amet, consectetur   | 
|      adipiscing elit. Praesent augue ex, dapibus quis | 
|      vulputate ut, bibendum vitae felis. Nunc tempor | 
|      elit leo.           | 
|                   | 
| <--       PAGE WIDTH        --> | 

的標題有min-width: 100px; margin-right: 10px;。 內容應使用標題未使用的所有可用空間。

我的結構類似的東西：

<div class="data"> 
    <div class="title">Some title:</div> 
    <div class="value">Content.</div> 
</div> 

Answer 1

您可以用CSS Flexbox的技術

.data { 
 
    border: 1px solid #ccc; 
 
    padding: 10px; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
.title { 
 
    min-width: 100px; 
 
    margin-right: 10px; 
 
    font-weight: bold; 
 
} 
 

 
.value { 
 
    -webkit-flex: 1; 
 
    flex: 1; 
 
}

<div class="data"> 
 
    <div class="title">Some title:</div> 
 
    <div class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus risus quis quam elementum mollis. Aenean in egestas diam.</div> 
 
</div> 
 
<div class="data"> 
 
    <div class="title">Some other much longer title:</div> 
 
    <div class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus risus quis quam elementum mollis. Aenean in egestas diam.</div> 
 
</div>