Question

大家好，这可能是一个简单的问题，但我在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;    
}

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

Answer 1

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

position: relative

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

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

保持一切顺利。如果这不是你想要达到的目的，请告诉我！

Answer 2

您的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;    
}

Answer 3

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

<!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>

请注意，＆lt; head＆gt;中未包含的内容标签应位于＆lt; body＆gt;内标签，除了您的doctype和＆lt; html＆gt;标签 - 这包括您的＆lt; header＆gt;标签

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

.wrapper {
    width: 1325px;
}

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

带有CSS元素的Html5在缩放时移动

3 个答案: