0

大家好，这可能是一个简单的问题，但我在我的 HTML 和 CSS 页面中遇到了这个问题。

问题：当我放大时，“部分”部分在导航下方移动，当我缩小时，页脚移动到部分部分旁边.....

这是我的 HTML 页面的示例：

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>MyWebsite</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<header>
   Header
  </header>


<body>



  <nav>
      <ul>
          <li>
             Tab1 
          </li>
          <li>
            Tab2 
          </li>
          <li>
             Tab3 
          </li>
          <li>
             Tab4 
          </li>
          <li>
             Tab5
          </li>


      </ul>
  </nav>



  <section id="">
 Section
  </section>

  <footer>
  Footer
  </footer>



</body>


</html>`

这是CSS页面：

header
{
    width: 1325px;
    height: 150px;
    background-color: green;
    position: relative;
}

nav
{
    position: relative;
    width: 400px;
    height:  500px;
    background-color: teal;
    float: left;
    overflow: hidden;
}

section
{
    position: relative;
    float: left;
    width: 925px;
    height: 500px;
    background-color: blue;
}

footer
{
      float: left;
    width: 1325px;
    height: 50px;
    background-color: lime;
    position: relative;
    overflow: hidden;    
}

感谢您的帮助和提前的时间

4

3 回答 3

0

Jack 是正确的，您可能想尝试将容器添加到您的元素中。看到这个小提琴：JSFiddle。本质上，它们都是

position: relative

没有一个绝对定位的容器可以参考。使用 CSS 添加包装容器：

position: absolute;
height: 700px;
width: 1325px;

保持一切正常。如果这不是您想要达到的目标，请告诉我！

于 2013-10-07T15:23:47.413 回答
0

您的body标签需要在标题之前。为您的 HTML/CSS 添加一个带宽度的包装器。

这是一个小提琴：http: //jsfiddle.net/msJLW/

<div id="wrap">
<header>
   Header
  </header>
  <nav>
      <ul>
          <li>
             Tab1 
          </li>
          <li>
            Tab2 
          </li>
          <li>
             Tab3 
          </li>
          <li>
             Tab4 
          </li>
          <li>
             Tab5
          </li>
      </ul>
  </nav>
  <section id="">
 Section
  </section>

  <footer>
  Footer
  </footer>

</div>

#wrap{
    width:1325px;
}
header
{
    width: 1325px;
    height: 150px;
    background-color: green;

}

nav
{
    width: 400px;
    height:  500px;
    background-color: teal;
    float: left;
    overflow: hidden;
}

section
{
    float: left;
    width: 925px;
    height: 500px;
    background-color: blue;
}

footer
{
      float: left;
    width: 1325px;
    height: 50px;
    background-color: lime;
    overflow: hidden;    
}
于 2013-10-07T15:26:22.923 回答
0

我不完全确定它为什么会这样移动，但我知道一个简单的解决方案：将它全部包含在一个包装器中。复制/粘贴这个：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyWebsite</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="wrapper">
    <header>
      Header
    </header>
     <nav>
      <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
        <li>Tab 4</li>
        <li>Tab 5</li>
      </ul>
    </nav>
    <section id="">
      Section
    </section>
    <footer>
      Footer
    </footer>
  </div>
</body>
</html>

请记住，<head> 标签中未包含的任何内容都应包含在 <body> 标签中，除了您的 doctype 和 <html> 标签——这包括您的 <header> 标签。

无论如何，我们上面所做的就是将所有内容包装在一个“div”中，这是我们可以划分网页的一种方式。它们很容易使用 css 控制，您应该将以下内容复制/粘贴到 css 文件的底部：

.wrapper {
    width: 1325px;
}

如果您需要更多帮助，请告诉我：D

于 2013-10-07T15:35:11.043 回答