Question

我需要做一个带有标题的简单网站：

http://antonio.x-br.com/menu_website.png

我的图片可能不完全准确，但包装器必须正好是960px，居中。

菜单栏...无论客户端屏幕的大小如何，都必须具有 RIGHT 的无限宽度。

对于双方来说，我们都知道宽度：100％快速而迅速地解决它。但仅限于一方？

到目前为止，我已经设法通过这种混合css以解决方法工作：

.wrapper {
max-width: 960px;
margin: 0 auto;
position: relative;
width: 960px;
}

#top_menu {
margin-top: 48px;
height: 40px;
width: 582px;
display: block;
float: right;
}

#top_menu .leftborder {
width: 7px;
height: 40px;
background: url('images/menuborder.jpg') no-repeat;
display: block;
float: left;
}

#top_menu .content {
width: 543px;
height: 20px;
background-color: #231f20;
display: block;
float: left;
padding: 10px 16px;
}

#top_menu_scrapper {
position: absolute;
display: block;
height: 40px;
background-color: #231f20;
height: 40px;
top: 48px;
left:960px;
width: 0px;
margin: 0;
}

使用这个JS代码：

function AutoDivScrapper () {
var ScrapperDiv = document.getElementById('top_menu_scrapper');
var UserWindow = parseInt(document.body.clientWidth);
var NewScrapperWidth = ( UserWindow - 960 ) / 2

if (NewScrapperWidth < 0) {
    NewScrapperWidth = 0;
}

ScrapperDiv.style.width = parseInt(NewScrapperWidth) + "px";
}

我创造的是：

首先，在包装器中创建一个名为 top_menu 的div，它创建菜单的一部分，我将在其中编写链接并放置花哨的圆形边框，小房子等。

另一个div，名为 top_menu_scrapper ，绝对且基本上只有高度，顶部和左对齐以及背景颜色。

JS捕获用户屏幕的宽度，取出包装器两侧的960（包装器的大小）。由于我只想要一个尺寸，我将该值分成两半，而BAM，我们得到正确的大小，以我想填充的部分屏幕为单位。

这对我来说似乎很完美，但是猜猜看，我老板说这是一个有点“bug-ish”，因为如果客户端在一个小屏幕上加载页面，然后最大化它而不再重新加载，我们会看到一个右边的大洞。

是的，我的朋友们，听起来更奇怪，这正是他所抱怨的。

无论如何，我在这里，请求你的一些知识来帮助我的建议。

如果你们知道一个更好的方法来做这个菜单... 或让我的JS工作在实时，我非常感谢你的支持：d

Answer 1

很久以前我在this site做过。我不记得究竟如何，但我检查了CSS，我认为这是必要的代码。

#menu-extend { 
background-color: #e8e8e8;
float: right;
height: 30px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: -30px;
position: relative;
right: 0px;
top: 100px;
width: 50%;
z-index: 0;
}

Answer 2

您可以绝对定位元素的所有边。因此，您可以使用样式规则来定位菜单div，如下所示：

.menuDiv { top:50px; left:50%; padding-left:480px; margin-left:-480px; right:0px; position:absolute;}

这在IE6中不起作用，因此您需要决定如何或是否要解决此问题。

编辑：将左手位置设置为50％然后使用负边距和填充等于包装div的宽度的一半：http://jsfiddle.net/brddU/1/（我假设包装div是菜单下面有一个独立的div。

Answer 3

我为你做了demo，它应该有效。在IE7 / 8/9，Firefox 4，Safari 5，Chrome 10上进行了测试。

干杯

Answer 4

除非我遗漏了你的意图，否则你可以添加两个CSS规则：

.logoDiv {width:960;float:left}
.menuDiv {width:100%}

然后使用以下HTML：

<div class="logoDiv">This is my logo code</div>
<div class="menuDiv">This is my menu code</div>

如何将左侧位置的div放置在屏幕边缘的另一个div和右侧位置？

4 个答案: