html - 如何在没有绝对定位的情况下以 100% 宽度适合元素？

Question

我正在尝试使用 css 进行 4 帧设计，如以下代码所示：

http://jsfiddle.net/7qBKJ/1/

但我不想使用position:absolute;，我正在尝试这样做：

topframe: block;
left,right and centerframes: inline-block;

而且我想确保在右框架和左框架中都有 200 像素的宽度，其余部分应由中心框架填充。如果没有绝对定位，我该如何管理？

我试过这个，但是当屏幕宽度减小时，它会上下移动框架：

http://jsfiddle.net/V4vAc/2/

在这个小提琴中，centerframe与 对齐leftframe，因为它们都是inline-block，与 centerframe 规则margin-left:0px;，但我不知道如何设置centerframe' 右与rightframe' 左对齐，而不指定宽度。

那么我怎样才能使#centerframe's 的宽度等于屏幕宽度 - 400 px 呢？

谢谢 ！

Answer 1

您要做的是将两个侧边栏放在文档流中的首位。然后，您将第一个侧边栏向右浮动，第二个向左浮动。

<div id="left"></div>
<div id="right"></div>
<div id="center"></div>

/* main.css */
#left {
    width: 200px;
    height: 100px;
    background-color: blue;
    float: left;
}
#right {
    width: 200px;
    height: 100px;
    background-color: red;
    float: right;
}
#center {
    width: auto;
    height: 100px;
    background-color: green;
    margin: 0 200px;
}

http://jsfiddle.net/samgh/JjsFF/

如果您想center成为两个侧边栏下方的全宽，您可以删除边距。希望这可以帮助。