Question

通常background_wrapper会这样做，但左列未对齐。只有当它没有绝对的定位时。

是否存在无论包含元素是什么，内容将在一定宽度内对齐的方式？组织一切。

我取出了positiong：absolute，它将它对齐。但是如果我稍后应用绝对定位怎么办？

将网站包装成1024px的好方法是什么？

#wrapper {
  margin: 0 auto;
  margin-top: 25px;
  width: 960px;
}

body {
  background: repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px), /* on "bottom" */
  linear-gradient( to bottom, #fff, #999);
}

#header {
  background-color: blue;
  left: 55px;
  top: 15px;
  width: 910px;
  height: 50px;
  z-index: 4;
}

#nav_left {
  background-color: blue;
  position: absolute;
  left: 60px;
  top: 140px;
  width: 140px;
  height: 280px;
  z-index: 12;
}

<!DOCTYPE>
<HTML>

<head>

  <title>UNAWAKENED.NET - Welcome!</title>

  <link rel="stylesheet" href="index.css">

  <body>

    <section id="wrapper">

      <div id="header">Header</div>

      <section id="nav_left"></section>

    </section>
  </body>

Answer 1

如果我正确地理解了你的问题，主要的问题是absolute元素离身体左侧60px，而不是左侧包装。如果要将子position:relative;元素放置在边界之外，则应将absolute用于父项。

结论：对position:relative;

使用#wrapper

#wrapper {
  margin: 0 auto;
  margin-top: 25px;
  width: 960px;
  position: relative;
}

body {
  background: repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px), /* on "bottom" */
  linear-gradient( to bottom, #fff, #999);
}

#header {
  background-color: blue;
  left: 55px;
  top: 15px;
  width: 910px;
  height: 50px;
  z-index: 4;
}

#nav_left {
  background-color: blue;
  position: absolute;
  left: 60px;
  top: 140px;
  width: 140px;
  height: 280px;
  z-index: 12;
}

<!DOCTYPE>
<HTML>

<head>

  <title>UNAWAKENED.NET - Welcome!</title>

  <link rel="stylesheet" href="index.css">

  <body>

    <section id="wrapper">

      <div id="header">Header</div>

      <section id="nav_left"></section>

    </section>
  </body>

Answer 2

如果我猜错了，你希望nav_left位于标题的正下方，同时仍然绝对定位。

在这种情况下，解决方案是给包装器position:relative，以便nav_left与标题位于同一容器中。然后nav_left需要top:50px; left:0才能在标题下方结束（因为标题高50像素）。

#wrapper {
  margin: 0 auto;
  margin-top: 25px;
  width: 960px;
  position: relative;
}

body {
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px), /* on "bottom" */
  linear-gradient(to bottom, #fff, #999);
}

#header {
  background-color: blue;
  left: 55px;
  top: 15px;
  width: 910px;
  height: 50px;
  z-index: 4;
}

#nav_left {
  background-color: blue;
  position: absolute;
  left: 0px;
  top: 50px;
  width: 140px;
  height: 280px;
  z-index: 12;
}

<section id="wrapper">

  <div id="header">Header</div>

  <section id="nav_left"></section>

</section>

注意：标题的css中也有left和top，但由于标题未定位，因此无效。

Answer 3

根据this MDN article，绝对定位的元素：

不要为元素留出空间。相反，将其放置在相对于 最近定位的祖先 的指定位置或相应的位置。绝对定位的盒子可以有边距，它们不会随着任何其他边缘而崩溃。

这意味着如果您希望position: absolute d元素受到#wrapper的影响，则需要#wrapper position属性。否则，它将默认为包含块，在这种情况下是浏览器窗口。

截至目前，您已应用top和left属性，但这些属性相对于浏览器窗口的左上角。您希望#nav_left相对于包装器定位自己，这意味着#wrapper需要一个位置属性。试试这个：

#wrapper {
  margin: 0 auto;
  position: relative;
  margin-top: 25px;
  width: 960px;
}

Answer 4

如果内容宽度为1024px，则wrapper元素可以设置此宽度。菜单可以浮动在左侧。 wrapper元素将css display属性设置为inline-block以允许居中。

<!DOCTYPE html>
<html>

<head>

  <title>UNAWAKENED.NET - Welcome!</title>

  <link rel="stylesheet" href="index.css">

  <style>
    body {
      text-align: center;
    }
    
    #wrapper {
      display: inline-block;
      width: 1024px !important;
      text-align: left;
    }
    
    #nav_left {
      float: left;
      width: 200px;
      background-color: red;
    }
    
    #header {
      background-color: blue;
    }
  </style>
</head>

<body>

  <section id="wrapper">

    <div id="header">Header</div>

    <section id="nav_left">
      left
    </section>

    content here

  </section>

</body>

</html>

如何包装整个布局？

4 个答案: