[英]CSS: text box should respect left side div width
我有一個具有title和content 的結構。 我喜歡內容尊重標題寬度。 基本上是這樣的:
| 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;
min-width: 100px; margin-right: 10px;
. 內容應使用標題未使用的所有可用空間。
我的結構是這樣的:
<div class="data">
<div class="title">Some title:</div>
<div class="value">Content.</div>
</div>
您可以使用 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.