0

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

这是我到目前为止所得到的，显然它是不正确的：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>

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

谢谢

4

1 回答 1

0

如果您摆脱固定位置并将所有 div 浮动到左侧，它们将不会相互堆叠。然后，您可以将中间 div 设置为您希望它们分开的宽度，或者创建另一个 div 来环绕该中间 div 并将其设置为您希望它们分开的宽度。您甚至可以将宽度设置为百分比，以便它会针对不同的屏幕尺寸而变化。如果你想让那个右边的 div 一直到右边，不管右边和中间 div 之间有多少空间，你只需要把那个右边浮动。

于 2013-03-10T02:52:22.637 回答