Question

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

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

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

我想确保在右框架和左框架中有200px的宽度，其余部分应由中心框架填充。如何在没有绝对定位的情况下管理这个？

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

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

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

那么如何使#centerframe的宽度等于屏幕宽度 - 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为两个侧边栏下方的整个宽度，则可以删除边距。希望这会有所帮助。

如何在没有绝对定位的情况下将元素装入100％宽度？

1 个答案: