html - 获取固定的左侧元素和流动的右侧元素

Question

我想今天是星期五，所以我脑袋放屁了。我一辈子都无法设置具有固定左侧元素的页面 <aside>大约 200 像素和一个流体宽度的右侧元素 <article>占用剩余空间。

很简单，但我遇到了 block 、内联问题。

朝着正确的方向前进会很棒!

http://jsfiddle.net/pcEbG/

<style>
aside {
    width: 200px;
}

aside, article {
    display: inline-block;
}
</style>


<section>
    <aside>
    This is a section
    </aside>


    <article>
    This is an article that should take up the remaininfg width
    </article>

</section>

Answer 1

我不知道你的浏览器要求是什么，但如果你知道 aside 是固定宽度，那么对于流体容器的宽度你总是可以使用:

width: calc(100% - 200px);

这是 calc http://caniuse.com/#search=calc 的浏览器兼容性