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;。内容应使用 title 未使用的所有可用空间。

我的结构是这样的：

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

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

1 个答案: