Question

我需要帮助我的HTML，我似乎无法找到导致这种情况的原因，这个div的内容是＆＃34;内容包装器＆＃34;没有出现..我想到了它可能存在的每一个可能的东西，任何想法？，继承人的html + CSS：

<!DOCTYPE html>
<html>
 <head>
 <link rel="stylesheet" href="css/main.css">

</head>

<body>
<header>

</header>

<div id="content_wrapper">
    <div id="top_section">
        <section id="td_left">
            <h1>Hi! I'm Cesar Downs</h1>
        </section>
        <section id="td_right"></section>
    </div>

    <div id="middle_section"></div>

    <div id="bottom_section"></div>


   </div>
   </body>
   </html>

CSS：

section {
display: block; }

a {
 text-decoration: none; }

p {
 font-family: "Roboto", sans-serif; }

  h1,
  h2,
  h3,
  h4,
  h5 {
   font-family: Oswald, sans-serif; }

   #content_wrapper {
   width: 960px;
   margin: 0 auto;
   background: red;
   position: absolute; }

   /*# sourceMappingURL=main.css.map */

Answer 1

由于您已经为自己设置了包装元素absolutely，因此您可能需要添加＆＃39; exact＆＃39;位置引用最近的父元素，其位置为relative;

如果没有声明，如果我没有弄错的话，它会自动与你的html标签对齐。

为此，您可以使用以下任何（或全部）：

left:W;
right:X;
top:Y;
bottom:Z;

其中W，X，Y和Z是您的定位值（单位可能会有所不同）。

＆＃13;

section {
  display: block;
}
a {
  text-decoration: none;
}
p {
  font-family: "Roboto", sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: Oswald, sans-serif;
}
#content_wrapper {
  width: 960px;
  margin: 0 auto;
  background: red;
  position: absolute;
  top:0;
  left:0;
  
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/main.css">

</head>

<body>
  <header>

  </header>

  <div id="content_wrapper">
    <div id="top_section">
      <section id="td_left">
        <h1>Hi! I'm Cesar Downs</h1>
      </section>
      <section id="td_right"></section>
    </div>

    <div id="middle_section"></div>

    <div id="bottom_section"></div>


  </div>
</body>

</html>

＆＃13;

Answer 2

此代码工作正常[我使用内部样式]：

<!DOCTYPE html>
<html>
 <head>
 <link rel="stylesheet" href="css/main.css">
<style>
 section 
{
display: block; }

a {
 text-decoration: none; }

p {
 font-family: "Roboto", sans-serif; }
  h1,
  h2,
  h3,
  h4,
  h5 {
   font-family: Oswald, sans-serif; }

   #content_wrapper {
   width: 960px;
   margin: 0 auto;
   background: red;
   position: absolute; }
 </style>
</head>
<body>
<header>
</header>
<div id="content_wrapper">
    <div id="top_section">
        <section id="td_left">
            <h1>Hi! I'm Cesar Downs</h1>
        </section>
        <section id="td_right"></section>
    </div>
    <div id="middle_section"></div>
    <div id="bottom_section"></div>
   </div>
   </body>
   </html>

确保CSS文件正确连接

为什么我的包装器（div）没有显示？

2 个答案: