我在左边的第一个旁边很好,然而,我右边的第二个被推倒了。如何让它像#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>
答案 0 :(得分:0)
我建议你使用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>