[英]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.