我正在尝试创建一个布局，其右上角和左上角都有固定菜单（宽度均为 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>
我知道这一定是一项非常简单的任务；但是，我被困住了！我保证，在寻求帮助之前，我已经花了很多时间尝试解决这个问题。任何帮助将不胜感激。
谢谢
如果你摆脱固定定位并将所有 div 浮动到左侧，它们就不会堆叠在一起。然后，您可以将中间 div 设置为您希望它们分开的宽度，或者创建另一个 div 来环绕该中间 div 并使其设置为您希望它们分开的宽度。您甚至可以将宽度设置为百分比，以便它会根据不同的屏幕尺寸而变化。如果您希望右侧的那个始终向右移动，无论右侧和中间的 div 之间有多少空间，您只需将该右侧浮动到右侧即可。
我遇到了类似的问题，我需要创建一个固定的 div，但它应该占用所需的空间并且不应该与内容重叠。我想出了一种方法可以轻松实现这一点，尽管您可能需要编写更多代码。以下是您可以做到的方法：
希望这有帮助。