html - 固定大小的右面板，流动的左面板和语义元素顺序

Question

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

<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

只需更改 float 的元素，然后使用 calc

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

Demo Fiddle

将您的 CSS 更改为:

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