CSS 拼图 : making a select2 box 100% width in a fluid-width div?

Question

我正在使用很棒的 Select2 jQuery plugi名词

目前我有一个固定宽度的 div float 在一个可变宽度的 div 的左边，这很有效:

<div class="row">
<div class="col left">Label</div>
<div class="col right"></div>
</div>
.row {
    display: table;
}
.col {
    display: table-cell;
}
.col.left {
    width: 150px
}

但是当我在 fluid right div 中添加一个 select2 框时效果不佳。现在很明显，流体右 div 实际上不是 100% 宽度，它适应其内容的宽度，结果 select2box 也不断改变大小:

<div class="row">
<div class="col left">Label</div>
<div class="col right"><select style="width: 100%" class="select2">

这是一个演示问题的 JSFiddle:http://jsfiddle.net/vfa4831b/4/

如何使 .right 宽度可变的 div 适应可用宽度，并保持该大小？

将 width: 100%; 添加到 .col.right 使 div 100% 宽度，但也会溢出 .row 的边界.

更新:不幸的是，我需要 IE8 支持，所以不能只使用 calc。

Answer 1

试试这个:

.row {
    display: table;
    width: 100%;
    background: #ccc;
}

您使用 display: table 的行实际上并未设置为 100%。