Question

我想创建一个高度和宽度相同的#necker div，并以与固定在屏幕顶部的#header div相同的方式居中。我试图将数据从#header div复制到#necker div，并从上向下向下放置边距。失败:(。您能帮我吗？

#header {
  position: fixed;
  display: inline-block;
  margin: 0 10%;
  top: 0px;
  width: 80%;
  height: 150px;
  background: rgb(217, 47, 54);
  z-index: 1;
}

#necker {
  position: relative;
  display: inline-block;
  margin: 0 10%;
  margin-top: 142px;
  width: 80%;
  height: 150px;
  background: rgb(245, 210, 83);
}

<html>

<head>
  <title> Yakir Freed </title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="header">
    <img id="logo" src="images/logo.png" alt="Yakir Freed" />
    <div class="Categories" id="Cate1">
      <h2>Home Page</h2>
    </div>
    <div class="Categories" id="Cate2">
      <h2>About us</h2>
    </div>
    <div class="Categories" id="Cate3">
      <h2>Support</h2>
    </div>
    <div class="Categories" id="Cate4">
      <h2>Sales!</h2>
    </div>
    <div class="Categories" id="Cate5">
      <h2>Contact us</h2>
    </div>
  </div>
  <div id="necker"></div>
</body>

</html>

Answer 1

您对代码的期望到底是什么？如果问题是两个div的宽度不同，请尝试从主体上移除边距和填充（因此，两种情况下80％的像素数相同）。

固定块使用整个视口宽度来计算80％，而#necker使用主体宽度（使用浏览器要应用的默认边距或填充）

body{
        margin: 0px;
        padding: 0px;
    }

如果这不是您的问题，请看不到您需要实现的目标，您能具体一点吗？

Answer 2

div不能与菜单居中对齐，因为position: fixed导致它忽略浏览器样式表中的默认margin。如果将margin: 0添加到body，则两个元素将位于同一位置的中心。

#header {
  position: fixed;
  display: inline-block;
  margin: 0 10%;
  top: 0px;
  width: 80%;
  height: 150px;
  background: rgb(217, 47, 54);
  z-index: 1;
}

#necker {
  position: relative;
  display: inline-block;
  margin: 0 10%;
  margin-top: 142px;
  width: 80%;
  height: 150px;
  background: rgb(245, 210, 83);
}
body {
margin: 0;
}

<div id="header">
  <img id="logo" src="images/logo.png" alt="Yakir Freed" />
  <div class="Categories" id="Cate1">
    <h2>Home Page</h2>
  </div>
  <div class="Categories" id="Cate2">
    <h2>About us</h2>
  </div>
  <div class="Categories" id="Cate3">
    <h2>Support</h2>
  </div>
  <div class="Categories" id="Cate4">
    <h2>Sales!</h2>
  </div>
  <div class="Categories" id="Cate5">
    <h2>Contact us</h2>
  </div>
</div>
<div id="necker"></div>
<div class="makeitscroll"></div>

Answer 3

我相信以下解决方案将为您提供帮助。您错过的是默认边距<body>拥有的。删除它可以解决问题。

关键部分

body {
  margin: 0;
}

摘要

body {
  margin: 0;
}

#header {
  position: fixed;
  display: inline-block;
  top: 0px;
  margin: 0 10%;
  width: 80%;
  height: 150px;
  background: rgb(217, 47, 54);
  z-index: 1;
}

#necker {
  position: relative;
  display: inline-block;
  margin: 0 10%;
  margin-top: 142px;
  width: 80%;
  height: 150px;
  background: rgb(245, 210, 83);
}

<html>

<head>
  <title> Yakir Freed </title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="header">
    <img id="logo" src="images/logo.png" alt="Yakir Freed" />
    <div class="Categories" id="Cate1">
      <h2>Home Page</h2>
    </div>
    <div class="Categories" id="Cate2">
      <h2>About us</h2>
    </div>
    <div class="Categories" id="Cate3">
      <h2>Support</h2>
    </div>
    <div class="Categories" id="Cate4">
      <h2>Sales!</h2>
    </div>
    <div class="Categories" id="Cate5">
      <h2>Contact us</h2>
    </div>
  </div>
  <div id="necker"></div>
</body>

</html>

固定div下的div

3 个答案:

关键部分

摘要