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

我有三个专栏。1为固定宽度，在左侧浮动

另外2个，我想占剩下宽度的50%

因此，如果屏幕是1000px宽，第一列是300px，那么接下来的两列将剩下700px除以2（350px）

我从来没有想到过一种方法可以做到这一点，这样它就可以扩展

能做到吗？如果是，怎么做

---

，希望右边的列将占据左边的列，然后很好地分割成2，但我完全错了。

您使用%或px，如果您使用第一个div float left，则下一个div之后会根据宽度大小自动并排出现，直到使用清除：两者

使用一点jQuery计算的解决方案

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

    background: #ccc;
}

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

#third {
    background: #000;
}

---

我建议您不要在css上混合%和px作为不同的元素宽度！！我也是，但是它非常适合当前的应用程序。

$(document).ready(function(){
    var winW  = $(window).width();   // grab the window width
    var leftW = $('#left').width();  // grab the #left width
    $('#right').width( (winW - leftW)-24 ); // window width - #left width - your adjustments = result!
});