html - 如何使我的 与主要部分高度相同？

Question

现在我正在尝试复制网页图像，但出于某种原因，在我的页面部分，显示“推荐链接”的部分与“HOME”标题不一致。有没有办法做到这一点？我将如何更正我的代码/css 来实现它？谢谢你! (现在旁边的部分出现在页面下方比预期更远的地方)。

我的代码:

 <!-- Your code goes here -->
<section>  
<h1>HOME</h1>

<article>
<h2>HTML5 & CSS Normalize</h2>
<p> </p>

</article>

<article>
<h2>Honesty/Copyright</h2>
<p> </p>

</article>
</section>
<aside>
<section>
<h4><u>Recommended Links</u></h4>

<p>HTML5 

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</P>
<p>CSS 

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</P>
<p>JavaScript 

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
 </P>

<hr>

<h4><u>Social Media Links</u></h4>

<div class="social">
       <!-- images on row 1 - top 3px left 4px   - increment left by 27px   for the next one -->
       <!-- images on row 2 - top 30px left 4px  - increment left by 27px for the next one -->
       <!-- images on row 3 - top 57px left 4px  - increment left by 27px for the next one -->
       <!-- images on the next row - increment top by 27px for the next row -->
 <a href="http://facebook.com" title="Face Book"  style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 4px;"></a> 

</div>
</section>
</aside>

<!-- Your code ends here -->
<!-- Defining Footer -->
<div id="footer">

  <script>
      var dt=new Date(document.lastModified);   // Get document last modified date
      document.write('This page was last updated on '+dt.toLocaleString()) 
   </script>

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

CSS:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/*Add an "active" class to the current link to let the user know which page      he/she is on*/
.active {
background-color: #4CAF50;
}

 /* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

aside {
  float: right;
  width: 30%;

.social{
position: relative; 
background: url('social-media.png') no-repeat; 
width: 250px; 
height: 140px;
}

#footer {
  clear: both;
  background: #000;
  color: #fff;
  bottom: 0;
}

Answer 1

如果添加此规则(并在第一个 section 上将其设置为 class，它们将排成一行

section.left {
  float: left;
  width: 70%;
}

示例

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/*Add an "active" class to the current link to let the user know which page      he/she is on*/
.active {
background-color: #4CAF50;
}

 /* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

section.left {
  float: left;
  width: 70%;
}

aside {
  float: right;
  width: 30%;
}

.social{
position: relative; 
background: url('social-media.png') no-repeat; 
width: 250px; 
height: 140px;
}

#footer {
  clear: both;
  background: #000;
  color: #fff;
  bottom: 0;
}

<!-- Your code goes here -->
<section class="left">  
  <h1>HOME</h1>

  <article>
    <h2>HTML5 & CSS Normalize</h2>
    <p> </p>

  </article>

  <article>
    <h2>Honesty/Copyright</h2>
    <p> </p>

  </article>
</section>

<aside>
  <section>
    <h4><u>Recommended Links</u></h4>

    <p>HTML5 

    <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

    <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
  <p>CSS 

  <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

  <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

  <p>JavaScript 

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<hr>

<h4><u>Social Media Links</u></h4>

<div class="social">
  <!-- images on row 1 - top 3px left 4px   - increment left by 27px   for the next one -->
  <!-- images on row 2 - top 30px left 4px  - increment left by 27px for the next one -->
  <!-- images on row 3 - top 57px left 4px  - increment left by 27px for the next one -->
  <!-- images on the next row - increment top by 27px for the next row -->
  <a href="http://facebook.com" title="Face Book"  style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 4px;"></a> 

    </div>
  </section>
</aside>


<!-- Your code ends here -->
<!-- Defining Footer -->
<div id="footer">

  <script>
    var dt=new Date(document.lastModified);   // Get document last modified date
    document.write('This page was last updated on '+dt.toLocaleString()) 
  </script>

</div>

一种更现代、更好的方法是使用 flex

.container {
  display: flex;
}

aside {
  width: 30%;
}
section.left {
  width: 70%;
}

示例

.container {
  display: flex;
}

aside {
  width: 30%;
}
section.left {
  width: 70%;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/*Add an "active" class to the current link to let the user know which page      he/she is on*/
.active {
background-color: #4CAF50;
}

 /* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

.social{
position: relative; 
background: url('social-media.png') no-repeat; 
width: 250px; 
height: 140px;
}

#footer {
  clear: both;
  background: #000;
  color: #fff;
  bottom: 0;
}

<!-- Your code goes here -->
<div class="container"> 

  <section class="left">  
    <h1>HOME</h1>

    <article>
      <h2>HTML5 & CSS Normalize</h2>
      <p> </p>

    </article>

    <article>
      <h2>Honesty/Copyright</h2>
      <p> </p>

    </article>
  </section>

  <aside>
    <section>
      <h4><u>Recommended Links</u></h4>

      <p>HTML5 

      <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

      <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

      <p>CSS 

      <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

      <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

      <p>JavaScript 

      <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

      <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

      <hr>

      <h4><u>Social Media Links</u></h4>

      <div class="social">
        <!-- images on row 1 - top 3px left 4px   - increment left by 27px   for the next one -->
        <!-- images on row 2 - top 30px left 4px  - increment left by 27px for the next one -->
        <!-- images on row 3 - top 57px left 4px  - increment left by 27px for the next one -->
        <!-- images on the next row - increment top by 27px for the next row -->
        <a href="http://facebook.com" title="Face Book"  style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 4px;"></a> 

      </div>
    </section>
  </aside>

</div>

<!-- Your code ends here -->
<!-- Defining Footer -->
<div id="footer">

  <script>
    var dt=new Date(document.lastModified);   // Get document last modified date
    document.write('This page was last updated on '+dt.toLocaleString()) 
  </script>

</div>