html - 如何实现这个简单的 3 列 css 布局

Question

我有 3 列。 1 固定宽度， float 在左边。

另外 2 个，我想占据剩余宽度的 50%。

因此，如果屏幕宽度为 1000 像素，并且第一列为 300 像素，则接下来的 2 列将 700 像素除以 2 (350 像素)。

我从来没有找到一种方法来实现它的扩展。

可以吗？如果是怎么办？

I thought something like this jsfiddle would do the trick ，希望右边的列能占据剩下的部分，然后很好地分成 2 列，但我错了。

Answer 1

#left {
    float: left;
    width: 200px;
}
#right {width:auto; overflow:hidden}
#first {

    background: #ccc;
}

#second, #third {
    width: 48%;
    background: #333;
    float:left
}

#third {
    background: #000;
}