CSS：文本框应尊重左侧 div 宽度

Question

I have a structure that have a title and a content . And I like that the content respect the title width. Basically like that:

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

The title have min-width: 100px; margin-right: 10px; min-width: 100px; margin-right: 10px; . content should use all available space that title isn't using.

My structure is something like that:

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

Answer 1

You can achieve this with the css flexbox technique

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