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 个 block 。

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