html - 一个 child 设置父宽度，一个包裹

Question

给定父级中的两个 div，我如何允许一个定义父级宽度并强制另一个换行？我对涉及表或 js 的解决方案持开放态度，但对它们并不感兴趣。

HTML:

<div class="parent">
<div class="header">This should not wrap</div>
<div class="text">This should wrap to the header's width. This should not cause the parent to grow.</div>
</div>

CSS:

.parent {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
}
.header {
    white-space:nowrap;
}
.text {
    /*what goes here?*/
}

jsfiddle

Answer 1

我相信您正在寻找以下内容:

HTML

<div class="parent">
    <div class="header">This should not wrap</div>
    <div class="text">This should wrap to the header's width. This should not cause the parent to grow.</div>
</div>

CSS

.parent {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
}
.parent > .header {
    width: auto;
    display:inline-block;
}

jQuery

$(document).ready(function () {
    $('.text').width($('.header').width());
});

我使用了一些 jQuery 来设置 .text 类的宽度，使其与 .header 类的宽度相同。在此之前，我使用上面的 CSS 代码将 .parent 的宽度设置为 .header 的宽度。

DEMO JSFiddle