Question

我是编码的新手，这是我在Fullstack课程中的第一周，我们已经做了一段时间的作业。我设法使线框看起来与作业示例类似（我们应该使其看起来相同），并且不确定此html / css代码在哪里出问题。

此外，除了发布大多数CSS之外，我不确定要如何显示我正在做的事情，因此，如果我做错了，我深表歉意。

：）

我在试图均匀对齐的内容周围放置了红色边框。我尝试过更改填充，边距，浮动位置，宽度（我所知道的所有这些都可以调整框，但是我似乎仍然无法获得“ aside”内容来与其余线框对象对齐。

```HTML''

        <header class="main-head">
            <p>header</p>
        </header>
        <link rel="stylesheet" href="style.css">
        <nav>nav</nav>
        <div class="divCont">
                <div class="aside1">
                        <aside>aside</aside>
                </div>
                    <div>
                        <div>
                            <article class="sect1">section
                                <p class="art1">article</p>
                                <div class="inside1">
                                        <h3>h1, h2, h3</h3>
                                </div>
                                <div class="paraCont">
                                        <p class="para1">p</p>
                                </div>
                            </article>
                    </div>
                </div>
            </div>
        <footer>footer</footer>
 ```   </div>

`````````外部css```````````````

body {
    margin: auto;
    width: 50%;
    background-color: #777;
    text-align: center;
}

div.layout {
    width: 495px;
}

/* left section */
.sect1 {
    padding: 2%;
    width: 100%;
}

/* right section */
div.aside1 {
    margin-left: 100px;
    border: solid red;
    padding: 2%;
    color: #777;
    width: 200px;
    height: 165px;
    float: right;
    font-size: 18px;}

article {
    color:#777;
    font-size: 18px;
    background-color: #ebebeb;
}

div.divCont {
    border: solid red;
}

/* article box */
.art1 {
    width: 60%;
    color: #ebebeb;
    background-color: #777;
}

/* h1,h2,h3 box */
.inside1 {
    width: 60%;
    color: #ebebeb;
    background-color: #777;
}

/* para box */
p.para1 {
    width: 60%;
    color:#ebebeb;
    background-color: #777;
}

body {
  margin: auto;
  width: 50%;
  background-color: #777;
  text-align: center;
}

div.layout {
  width: 495px;
}


/* left section */

.sect1 {
  padding: 2%;
  width: 100%;
}


/* right section */

div.aside1 {
  margin-left: 100px;
  border: solid red;
  padding: 2%;
  color: #777;
  width: 200px;
  height: 165px;
  float: right;
  font-size: 18px;
}

article {
  color: #777;
  font-size: 18px;
  background-color: #ebebeb;
}

div.divCont {
  border: solid red;
}


/* article box */

.art1 {
  width: 60%;
  color: #ebebeb;
  background-color: #777;
}


/* h1,h2,h3 box */

.inside1 {
  width: 60%;
  color: #ebebeb;
  background-color: #777;
}


/* para box */

p.para1 {
  width: 60%;
  color: #ebebeb;
  background-color: #777;
}

<div class="layout">
  <header class="main-head">
    <p>header</p>
  </header>
  <link rel="stylesheet" href="style.css">
  <nav>nav</nav>
  <div class="divCont">
    <div class="aside1">
      <aside>aside</aside>
    </div>
    <div>
      <div>
        <article class="sect1">section
          <p class="art1">article</p>
          <div class="inside1">
            <h3>h1, h2, h3</h3>
          </div>
          <div class="paraCont">
            <p class="para1">p</p>
          </div>
        </article>
      </div>
    </div>
  </div>
  <footer>footer</footer>
</div>

这就是我想要做的-https://gyazo.com/6f27f40e4f3e75831b5e4728387ea11f

这是我到目前为止所做的-https://gyazo.com/79299a16a0eb2208db98519005b3bf9d

Answer 1

这只是一个快速的编辑。另外，您的链接标签应位于标签的上方


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
    margin: auto;
    width: 50%;
    background-color: #777;
    text-align: center;
}
div {
    border: 1px solid #000000;
}

.aside1 {
width: 49%;
float: left;
height: 165px;

}
.aside2 {
width: 49%;
float: right;
height: 165px;

}

article {
    background-color:green;
      padding: 20px;
      margin: 5px
}

footer {
width: 100%;

}

</style>
</head>
<body>
 <header class="main-head">
        <p>header</p>
 </header>
 <nav>nav</nav>
        <section class="divCont">
                <div class="aside1">
                        <p>Section</p>
                        <article>
                        Article
                        <div style="background-color:white; margin: 5px;">
                        H1,h2,H3
                        </div>
                        <div style="background-color:yellow;margin: 5px; ">
                        p
                        </div>
                        </article>
                 </div>
                 <div class="aside2">
                 Aside
                 </div>

          </section>



 <footer> Footer </footer>
</body>
</html>

编码新手，需要帮助修复html / css线框

1 个答案: