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

【问题标题】：How to position a div with left position against another div and right position at the edge of the screen?如何将左侧位置的 div 定位在屏幕边缘的另一个 div 和右侧位置？
【发布时间】：2019-08-10 05:20:26
【问题描述】：

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

_{（来源：x-br.com）}

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

而菜单栏...必须有无限宽度到RIGHT，不管客户端屏幕的大小。

对于双方来说，我们都知道 width: 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 位于包装器内，它创建了菜单的一部分，我将在其中编写链接并放置精美的圆形边框、小房子等。 p>

另一个 div，称为 top_menu_scrapper，它是绝对的，基本上只有高度、上下对齐和背景颜色。

JS 捕获用户屏幕的宽度，将 960（包装器的大小）从包装器的两侧取出。因为我只想要一种尺寸，所以我将值分成两半，然后 BAM，我们得到了我想要填充的屏幕部分的正确尺寸（以像素为单位）。

这对我来说似乎很完美，但你猜怎么着，我的老板说这有点“错误”，因为如果客户端在一个小屏幕上加载页面，然后在不重新加载的情况下最大化它，我们会看到一个右边有个大洞。

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

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

如果你们知道做这个菜单的更好方法...或让我的 JS 实时工作，我将非常感谢您的支持:D

【问题讨论】：

标签： javascript css html width

【解决方案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;
}

【讨论】：

不错。我认为它也适用于 IE6，这意味着它胜过我的解决方案。

【解决方案2】：

我为你做了一个demo，它应该可以工作。在 IE7/8/9、Firefox 4、Safari 5、Chrome 10 上测试。

干杯

【讨论】：

【解决方案3】：

您可以绝对定位元素的所有边缘。因此，您可以使用样式规则来定位菜单 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。

【讨论】：

【解决方案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>

【讨论】：