Question

我在左边的第一个旁边很好，然而，我右边的第二个被推倒了。如何让它像＃aside1和Section一样坐在顶端？我从之前的作业中复制了这个编码。我错过了编码中隐藏的内容吗？如果您需要了解更多信息，请告知我们。谢谢！

/* Main */
main {
    padding: 20px;
    max-width: 950px;
    height: auto;
}

/* Section */
section {
   width: 660px;
    margin: 0;
    padding: 11px 0 0 0;
        }
section img {
    padding: 0 15px 10px 15px;
}
section p {
    text-align: left;
    margin: 10px;
}
section dl {
    font-size: 13px;
    text-indent: 30px;
    padding: 20px 0 0 0;
}
section h1 {
    font-size: 35px;
    font-family: 'Euphoria Script', cursive;
}
/* Aside 1 */
#aside1 {
    width: 150px;
    height: 310px;
    float: left;
    background-color: #FEFA91;
    padding: 10px 0 0 0;
    text-align: center;
}
#aside1 img {
    text-align: center;
}

/* Aside 2 */
#aside2 {
    width: 150px;
    height: 310px;
    float: right;
    background-color: #FEFA91;
    padding: 10px 0 0 0;
    text-align: center;
}
#aside2 img {
    text-align: center;
}
#aside2 h2 {
    font-size: 15px;
}
#aside2 p {
    font-size: 13px;
}
#aside2 hr {
    border: 1px #000000 solid;
}

<main>  
<aside id="aside1">
    <img src="../images/castle.jpg" width="125px">
    <img src="../images/christmas2.jpg" width="125px">
    <img src="../images/christmas3.jpg" width="125px">
</aside>
<section>
    <img src="../images/christmas1.jpg" width="220px" style="float:left">
    <h1>Christmas Ears</h1>
    <p>Do you love Christmas?
    <br />If so, these red and green ears 
    featuring ice skating elves are perfect for you!</p>
    <p>Purchase at  <a href="http://www.etsy.com" target="_blank">Etsy.com</a></p>
    <dl>
        <dt>Bow: Red</dt>
        <dt>Band: Green</dt>
        <dt>Ears: Red & Green with Elves</dt>
    </dl>
</section>
    <aside id="aside2">
    <h2>Shop Other <br />Holiday Ears</h2><hr>
        <br />
        <img src="../images/halloween.jpg" width="125px">
        <p>Halloween</p>
        <br />
        <br />
        <img src="../images/spring.jpg" width="125px">
        <p>Spring</p>
</aside>
    </main>

Answer 1

我建议你使用vw或％来正确而不是px，问题是你的主要内容太大，所以第二个不得不低于主要内容。

这是一个快速解决方案，可以帮助您

main>aside, main>section{
  display : table-cell;
  padding : 20px 5px;
}
main{
  display : table;
  padding : 20px;
}
aside{
  width : 25vw;
  background-color: #FEFA91;
}
section{
  width : 50vw;
}

<main>  
  <aside id="aside1">
      <img src="../images/castle.jpg" width="125px">
      <img src="../images/christmas2.jpg" width="125px">
      <img src="../images/christmas3.jpg" width="125px">
  </aside>
  <section>
      <img src="../images/christmas1.jpg" width="220px" style="float:left">
      <h1>Christmas Ears</h1>
      <p>Do you love Christmas?
      <br />If so, these red and green ears 
      featuring ice skating elves are perfect for you!</p>
      <p>Purchase at  <a href="http://www.etsy.com" target="_blank">Etsy.com</a></p>
      <dl>
          <dt>Bow: Red</dt>
          <dt>Band: Green</dt>
          <dt>Ears: Red & Green with Elves</dt>
      </dl>
  </section>
  <aside id="aside2">
      <h2>Shop Other <br />Holiday Ears</h2><hr>
          <br />
          <img src="../images/halloween.jpg" width="125px">
          <p>Halloween</p>
          <br />
          <br />
          <img src="../images/spring.jpg" width="125px">
          <p>Spring</p>
  </aside>
</main>

第二个不在页面顶部

1 个答案: