Question

因此，我正在尝试将元素彼此嵌套在CSS中，到目前为止还算不上运气。我已附上我的课堂活动的照片，并希望获得一些指导！页眉，导航和页脚我无法解决任何问题，但是该部分和其中的所有内容以及将右边的位置和大小都给我带来了很多麻烦。

一个同学告诉我，该部分必须是相对的，然后其中的所有内容都绝对可以使用，但是我已经摆弄了好几个小时，没有任何反应。

到目前为止，这是我的CSS样式表-不好意思，我只做了一个星期就搞乱了代码！

    body {font-family: Arial, Helvetica, sans-serif;color:#777;background:#777;width:960px;font-size: 18px}

#header {background: #ebebeb;height: 100px;text-align: center;line-height: 100px;}

#nav {background: #ebebeb;height: 100px;text-align: center;line-height: 100px;}

#section {background: #ebebeb;width: 495px;height: 300px;position: relative;z-index: auto;}

#aside {background: #ebebeb;width: 400px;}

#footer {background: #ebebeb;height: 100px;text-align: center;line-height: 100px;}

#article {color:#ebebeb;background: #777;position: absolute;z-index: 1;}

#h1 {color:#777;background: #ebebeb;position: absolute;z-index: 2;}

#p {color:#777;background: #ebebeb;position: absolute;z-index: 2;}

div {width: 495px;height:300px}

This is what I need to do

Answer 1

在此解决方案中，标记应包含一个带有width:100%;的div，并且其中的div应该具有display:inline-block; width:49%;。

.container-width:100%;
.section，.aside-display:inline-block; width:49%;

最好，我将width：50％用于部分和一边，但使用width：50％+填充将adiv留在部分下面，这就是为什么我只使用49％。

body {
  background-color: grey;
}

.header,
.nav,
.footer {
  width: 100%;
  height: 70px;
  background-color: silver;
  margin-top: 10px;
  padding-top: 10px;
}

.container {
  width: 100%;
  margin-top: 10px;
}


/*css for section and aside*/

.section,
.aside {
  display: inline-block;
  width: 49.4%;
  vertical-align: top;
}


/*css for content of section and aside*/

.section-content,
.aside-content {
  height: 180px;
  background-color: silver;
  padding: 5px;
}

.article {
  width: 100%;
  display: inline-block;
}

.article-content {
  width: 100%;
  background-color: grey;
}

.padding-container {
  padding: 5px;
}

.articles {
  width: 100%;
  height: 30px;
  background-color: silver;
  margin-top: 10px;
}

<div class="header">
  <center>Header</center>
</div>

<div class="nav">
  <center>Nav</center>
</div>

<div class="container">
  <div class="section">
    <div class="section-content">
      <center>Section</center>
      <div class="article">
        <div class="article-content">
          <div class="padding-container">
            <center>Article</center>
            <div class="articles">
              <center><strong>h1, h2, h3</strong></center>
            </div>
            <div class="articles">
              <center>p</center>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="aside">
    <div class="aside-content">
      <center>Aside</center>
    </div>
  </div>
</div>

<div class="footer">
  <center>Footer</center>
</div>

如何使用CSS嵌套框/元素？

1 个答案: