jquery - 如何将 div 划分为百分比，但在左侧保持一个恒定宽度值 div

Question

我有 4 个盒子，我希望 box1 在左边有 50px 的宽度，剩下的 3 个盒子必须填满屏幕的其余部分，它们应该可以调整大小。我怎样才能做到这一点？

http://jsfiddle.net/DBnSp/

.box1
{
    width: 50px;
    height: 100px;
    background: red;
    float: left;
}

.box2
{
    width: 25%;
    height: 100px;
    background: yellow;
    float: left;
}

.box3
{
    width: 25%;
    height: 100px;
    background: blue;
    float: left;
}

.box4
{
    width: 25%;
    height: 100px;
    background: green;
    float: left;
}

Answer 1

您可以使用calc()函数来执行此操作：

JsFiddle

width: calc((100% - 50px) / 3);

这适用于这种情况，但如果您有很多固定值，它可能会变得有点复杂。基本上，它会计算您要填充的空间（屏幕的 100%，减去第一个框的 50px），并将其分成 3 个块。

了解 calc() 是 CSS3 的一部分，并不被普遍支持。这是查看哪些浏览器支持它的好网站：http: //caniuse.com/#feat=calc

Answer 2

您可以将百分比宽度 DIV 包装在具有固定左边距的外部 DIV 中。

http://jsfiddle.net/DBnSp/1/

<div class="box1"></div>
<div class="box-right">
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>

.box1 {
    width: 50px;
    height: 100px;
    background: red;
    float: left;
}
.box-right {
    margin-left: 50px;
}
.box2, .box3, .box4 {
    width: 33.33%;
    height: 100px;
    float: left;
}
.box2 { background: yellow; }
.box3 { background: blue; }
.box4 { background: green; }

Answer 3

这可以通过使用display表格来完成，您可以将第一个 div 设置为固定宽度，让其余 div 平均占用剩余空间！首先创建一个包装宽度display:table和width:100%;（或任何其他宽度）

.wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;
}

现在将框设置为display:table-cell

.stretch
{
   display: table-cell;
}

并将第一个宽度固定为固定宽度

.box1 {
    width: 50px;
    height: 100px;
    background: red;
}

小提琴

http://jsfiddle.net/DBnSp/4/

没有浮动，没有百分比，并且得到了很好的支持！