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

一个孩子设置父宽度，一个设置为包装

1 个答案: