如何让我的<aside>与主要部分相同？

时间：2016-03-16 03:16:56

标签： html css webpage

现在我正在尝试复制一个网页图片，但由于某种原因，在我的页面部分，它所说的部分＆＃34;推荐链接＆＃34;并没有与＆＃34; HOME＆＃34;头。有没有办法做到这一点？以及如何更正我的代码/ 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;
}

1 个答案:

答案 0 :(得分：3)

如果您添加此规则（并在第一个class上将其设置为section，则会排列

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>

相关问题
最新问题