固定大小右面板，左流体和语义元素顺序

Question

在网站的一部分上，我有一个包含两个块的容器。一个面板具有静态宽度，左面板应填充右面板左侧的空间。我今天通过以下标记解决了这个问题：

<div class="container">
   <div class="rightpanel"></div>
   <div class="leftpanel"></div>
</div>

.leftpanel {
overflow:hidden;
}

.rightpanel{
width: 200px;
float: right;
}

这里的问题是我需要在左侧面板之前声明右侧面板。我希望能够这样声明：

<div class="container">
   <div class="leftpanel"></div>
   <div class="rightpanel"></div>
</div>

有关我应该做什么的任何建议？很高兴得到帮助。

Answer 1

只需更改要浮动的元素，然后使用calc

将灵活大小的元素的宽度设置为页面的宽度减去侧边栏的已知宽度

Demo Fiddle

将CSS更改为：

.leftpanel {
    float:left;
    width:calc(100% - 200px)
}
.rightpanel {
    width: 200px;
    overflow:hidden;
}