CSS DIV 里面 DIV

Question

我刚刚开始使用 HTML / CSS，我正在尝试编写自己的网站。但是，我想要一个页眉、一个主要内容 div 和一个页脚。在主要内容 div 中，我想放置一个左栏和一个右栏，但不幸的是，左栏总是在 div 之外...我做错了什么？

这是我的 CSS:

body {
  background-color: black;
}
p {
  color: white;
}
#header {
  background-color: grey;
  margin-left: 100px;
  margin-right: 100px;
  border-radius: 5px;
  text-align: centaer;
  /*change later*/
}
#content {
  background-color: green;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 100px;
  margin-right: 100px;
  border-radius: 5px;
  padding: 50px;
}
#leftBar {
  background-color: orange;
  left: 20px;
  right: 20px;
  top: 20px;
  float: left;
  color: white;
  width: 20%;
  height: 60%;
  display: block;
}
#footer {
  background-color: gray;
  margin-bottom: 20px;
  margin-top: 20px;
  margin-right: 100px;
  margin-left: 100px;
  border-radius: 5px;
  text-align: center;
  /*change later*/
}

Here is my HTML

<html>

<head>
  <title>Titel</title>
  <link rel="stylesheet" type="text/css" href="FirstpageCSS/mainstyle.css" />
</head>

<body>
  <p>Formatierter Inhalt</p>

  <div id="header">HEADER</div>
  <div id="content">this is going to be the content



    <p>lol</p>
  </div>

  <div id="leftBar">contentntntntntnntnt</div>

  <div id="footer">FOOTER</div </body>

</html>

我做错了什么？我知道它与定位有关，但我总是对此感到困惑...

感谢作为新手的任何帮助。

Answer 1

尝试将左栏 div 放在内容 div

中

<div id="header">HEADER</div>
    <div id="content">this is going to be the content

        <div id="leftBar">contentntntntntnntnt</div>

        <p>lol</p>

    </div>

<div id="footer">FOOTER</div>

Answer 2

有更好的方法来定位网页上的内容并使其响应。 (如bootstrap)

<div id="header">HEADER</div>
<div id="content">this is going to be the content



<p>lol</p></div>

    <div id="leftBar">contentntntntntnntnt</div>

<div id="footer">FOOTER</div

对于初学者，您可以将 leftBar div 放在内容 div 中，和页脚的关闭标记 div.

<div id="header">HEADER</div>
<div id="content">this is going to be the content

<p>lol</p>

<div id="leftBar">contentntntntntnntnt</div>
</div>  

<div id="footer">FOOTER</div>

然后设置内容 div 的高度等于 leftBar 的高度 div。由于您将 leftBar 向左浮动，它将出现在内容 div 内和左侧。

要使页脚出现在底部，您需要打破浮动，做一个空的div然后用CSS

<div class="clear"></div>

在 CSS 文件中，

.clear {
    clear:both;
}

这应该适用于大部分情况。干杯！

CSS DIV 里面 DIV

CSS DIV inside DIV

html

css

positioning