Question

我创建了一个网站，包含div，类和网站所需的一切。但是当我调整窗口大小时，所有内部文本都会移动到NavArea和Buttons重叠。就像在StackOverflow上一样，页面顶部有搜索文本框，当我调整窗口大小时，它只是向上移动。这是什么解决方案？这是代码 -

CSS：http://pastebin.com/2rqinFJw
HTML：http://pastebin.com/u7eXUkwC

请在发布答案前测试代码，我已经尝试了所有内容，需要一个深入的答案，我能理解。我花了太长时间，但不打算放弃！

Answer 1

确定！

首先，编程的一个主要问题（我认为）是你经常使用绝对定位方式 - 老实说，它们应该几乎不会用于创建网站布局。

此外，这部分代码：

<div id="b1">
<ul>
<a href="index.html"><li>Home</li></a>
</ul>
</div>
<div id="b2">
<ul>
<a href="index.html"><li>Downloads</li></a>
</ul>
</div>

没有冒犯，这不是导航栏的正确布局。您的<a>标记应该放在<li>标记内，而不是在外面！此外，您将导航分为两部分 - 这是完全没必要的，同时在导航栏上也使用position: absolute; - 根本不需要。

这里应该（或可能）是什么：

<div id="b1">
  <ul>
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <a href="index.html">Downloads</a>
    </li>
  </ul>
</div>

请注意我将两者放在同一个<ul>标记中，并将<a>标记放在<li>标记内。我也重新安排了你的CSS来做同样的事情。

不确定你的<div class="imageArea"></div>是做什么的，但我只是把它扔进那里 - 看来你没有它的CSS代码。

我对主要布局所做的是将其移动到<div class="container">，我使用了以下CSS：

width: 1000px;
margin: 0 auto;

这将创建一个适合屏幕中间的各种容器。您可以根据需要调整此宽度 - 我发现1000px非常适合我的需求。

此外，我已将这两个元素浮动到此左侧 - 这允许两个<div>标记 - 您的导航部分和您的textBody彼此相邻。我制作的广告宽度为20%和80%。

由于中间需要一些间距，我在导航中添加了padding-right: 10px;。由于这会使100% + 10px的总宽度（会推动textBody向下），我添加了box-sizing: border;box;，以便将填充计入宽度（这样它就可以计算出来）宽度仍为100%）。

这是最终的HTML和CSS：

http://pastebin.com/ZC2TFir2（HTML）

http://pastebin.com/wEwzRP66（CSS）

我不认为很多会给你一个详细的答案（我知道我通常不会） - 但老实说，我相信这个网页可以设计得更好（加上我和＃39;很无聊，工作尚未开始。）

Answer 2

绝对定位一切都不是一个好习惯。 Absolute positioning将允许元素在彼此之上移动。绝对定位的元素不关心其他元素的布局。

如果您希望导航栏浮动到文本的左侧，请使用float属性，如下所示：

#nav {
    float: left;
}

请参阅此小提琴：http://jsfiddle.net/bex5b0by/

Answer 3

你可以放入

 #nav {
 position: relative ;}

 And after position:relative put in margin-left: -200px or whatever you want it to be. (You can use margin-left/right/top/whatever you need OR left/top/right/etc. : -number px / number px;

这意味着您将div与其他div相关联。但为了实现这一点，你必须让div在彼此之间。（＆lt; BIG div＆gt;

如何使这些div元素不重叠？

3 个答案: