Question

如何使两个hypergeom(20, 7, 12).pmf(4)元素符合固定宽度？

我不一定知道第一个元素的宽度，第二个更长的元素（带inline-block）取得固定元素的宽度，因此溢出容器。

white-space: nowrap

JSFiddle

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

.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;
}

Answer 1

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

.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;
}

另外，我建议使用名称中不依赖“inline-block”的css类名。如果您需要将显示更改为其他内容（块，表格等），可能会让人感到困惑。

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

2 个答案: