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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.