固定宽度容器内的行内块元素

Question

如何使 inline-block 的两个元素适合固定宽度？

我不一定知道第一个元素的宽度，第二个更长的元素（white-space: nowrap）占用了固定元素的宽度，所以溢出了容器。

/---------------------/
/Label: |Other content/ that just  |
/       |keeps going a/nd overflows|
/---------------------/

JSFiddle

.fixed-width-container{
    border: 1px red solid;
    width: 200px;
    white-space: nowrap;
}
.inline-block-1{
    display: inline-block;
    border: 1px blue solid;
    vertical-align: top;
}
.inline-block-2{
    display: inline-block;
    white-space: normal;
}

<div class="fixed-width-container">
    <div class="inline-block-1">Label:</div>
    <div class="inline-block-2">Some really long text that is going to go down to the next line</div>
</div>

Answer 1

我会使用 display: table 和 display: table-cell。所有现代浏览器（和 IE > 7）都支持此功能，并且它不是浮动 hack。

.fixed-width-container{
    border: 1px red solid;
    width: 200px;
    display: table;
}
.inline-block-1{
    white-space: nowrap;
    display: table-cell;
    border: 1px blue solid;
    vertical-align: top;
}
.inline-block-2{
    display: table-cell;
}

<div class="fixed-width-container">
    <div class="inline-block-1">Label word:</div>
    <div class="inline-block-2">Some really long text that is going to go down to the next line</div>
</div>

Answer 2

我更喜欢浮动溢出技巧。

将 css 更改为：

.fixed-width-container{
    border: 1px red solid; /* Get rid of white space rule */
    width: 200px;
}
.inline-block-1{
    float: left;
    border: 1px blue solid;
}
.inline-block-2{
    display: block;
    overflow: hidden;
}

此外，我建议使用 css class 不依赖于名称中的 "inline-block" 的名称。如果您需要将显示更改为其他内容（块、table-cell 等），可能会造成混淆。

固定宽度容器内的行内块元素

Inline-block elements within a fixed width container

html

css

whitespace