Question

我正在尝试在右上角和左上角（两者都具有50px的宽度）创建具有固定菜单的布局，并且在中间（不困难）创建900px宽的内容区域。但是，当用户重新调整其浏览器窗口大小时，我希望所有DIV元素保持其宽度 - 换句话说，我不希望任何DIV在任何其他DIV下面或之上。我希望浏览器窗口在小于1000px（页面上元素的组合宽度）时强制使用水平滚动条。

这是我到目前为止所得到的，显然它不正确：http://linomeoli.com/test

以下是代码：

<style type="text/css">

div#sideleft {
    position:fixed;
    width:50px;
    height:90px;
    top:20px;
    left:20px;
}

div#sideright {
    position:fixed;
    width:50px;
    height:90px;
    top:20px;
    right:20px;
}

div#middle {
    width:900px;
    margin:auto;
}

</style>

<body>

<div id="sideleft">
This shit<br />
that shit<br />
</div>

<div id="middle">
<img src="http://dispose.co/images/dulla_01.jpg" />
<img src="http://dispose.co/images/dulla_02.jpg" />
<img src="http://dispose.co/images/dulla_03.jpg" />
<img src="http://dispose.co/images/dulla_04.jpg" />
<img src="http://dispose.co/images/dulla_05.jpg" />
<img src="http://dispose.co/images/dulla_06.jpg" />
</div>

<div id="sideright">
previous<br />
next<br />
and whatever
</div>


</body>

我知道这必须是一项非常简单的任务;但是，我被困住了！我保证，在征求帮助之前，我花了很多时间试图解决这个问题。任何帮助将不胜感激。

由于

Answer 1

如果你摆脱固定位置并将所有div向左浮动，它们就不会堆叠在一起。然后你可以将你的中间div设置为你希望它们分开的宽度，或者创建另一个div来环绕那个中间div并使它成为你希望它们分开的宽度。您甚至可以将宽度设为百分比，以便针对不同的屏幕尺寸进行更改。无论右侧和中间div之间有多少空间，您都希望正确的方向一直向右移动，您只需向右移动那个空间即可。

如何获得一个固定的div来保持它的空间？

1 个答案: