是否可以在仅具有最小宽度的内联块div内部进行文本换行? (不是宽度,也不是最大宽度)
这就是我的意思:
<style type="text/css">
.container {
width:100%;
}
.field {
display: inline-block;
vertical-align: top;
min-width:25%;
}
label, input {
display: inline-block;
}
.alert {
display:block;
}
</style>
<div class="container">
<div class="field">
<label style="width:100px;">My Label</label>
<input style="width:200px;" type="text" />
<div class="alert">
This text should wrap at whatever width div.field actually is, and never push div.field out to the width of this text!
</div>
</div>
<div class="field">...another field...</div>
<div class="field">...another field...</div>
<div class="field">...another field...</div>
etc...
</div>
注意:
label
&amp; input
为inline-block
,因此它们保持在同一行,但div.alert
为block
,以便它显示在该字段其他内容下方的新行上。 div.field
只有MIN-WIDTH(不是宽度或最大宽度),因为当用户调整窗口大小(以及div.container
的宽度)时,应该发生以下情况:
一个。如果字段的固定宽度内联内容(在本例中为LABEL + INPUT = 300px)小于div.container
宽度的25%,那么div.field
应该恰好是容器宽度的25%。
湾如果字段的固定宽度内联内容超过容器的25%,那么它们应该将字段推出到它们的组合宽度。
那么,有没有办法让div.alert
根据上面的规则根据字段的宽度进行换行?
答案 0 :(得分:1)
不是没有jQuery,比如:
$('.alert').width($('.alert').parents('.field').width());
答案 1 :(得分:1)