html - 让 <aside> 与 mainSection 水平对齐

Question

在我目前正在开发的流体宽度布局中，将所有 aside 元素与 mainSection 元素(即右侧)对齐的最佳方式是什么。我已经尝试了一切，但没有任何效果。

Jsfiddle 在这里:http://jsfiddle.net/z7zvfe8n/1/

HTML代码

<section class="mainSection">
    <div class="section">
        <!-- POST 1 -->
        <article class="content">
             <h2><a href="a" title="First post">T Events</a></h2>

            <p class="post-info">This post is written by Johnny</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a felis ornare, convallis risus sed, imperdiet tortor. Fusce congue at neque vel viverra. Vivamus condimentum cursus pulvinar. Sed nec malesuada mauris, vel tincidunt augue. Nullam orci quam, interdum sit amet dictum eget, posuere eget dui. Integer placerat lectus sed tincidunt condimentum. Vestibulum tincidunt ex ac odio tempus, nec rutrum ante commodo.</p>
            <br/>
            <p>Nam et diam nec velit pellentesque hendrerit et non arcu. Duis non nisl tincidunt arcu laoreet sollicitudin quis et dui. Etiam eget velit tempor, maximus orci vel, maximus augue. Nunc imperdiet quis enim vitae auctor. Nullam vitae tortor porta, faucibus tellus et, maximus erat. Morbi varius consectetur luctus. Donec laoreet pellentesque mi vitae tristique. In laoreet lectus vitae tortor fermentum sollicitudin. Vestibulum sit amet nunc elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis rhoncus facilisis. Quisque ac vestibulum lorem. Morbi nec justo dignissim, dignissim dui vel, vehicula turpis.</p>
        </article>
    </div>
</section>
<section>
    <aside class="sidebar">
        <article>
             <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

            <p>Enter code: dolorem</p>
        </article>
    </aside>
    <aside class="sidebar">
        <article>
             <h2>CHRISTMAS BOOKINGS</h2>

            <p>Pellentesque a felis ornare, convallis risus sed.</p>
        </article>
    </aside>
    <aside class="sidebar">
        <article>
             <h2>Quote of the day:</h2>

            <p>Nam et diam nec velit pellentesque hendrerit et non arcu.</p>
        </article>
    </aside>
</section>

CSS

.mainSection {
    line-height: 25px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    float: left;
}
.section {
    width: 70%;
}
.content {
    background-color:#FFF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}
.sidebar:first-child {
    width: 20%;
    float: left;
    background-color:#fff;
}
.sidebar h2 {
    color:#F3C;
}
.sidebar:last-child {
    font-style:italic;
}

Answer 1

您的问题是您正在为子元素设置宽度，而您的 .mainSection 仍然占用 100% 的宽度，因为这就是带有 display: block 的元素的方式默认行为。这不会在它的右侧为您的 aside 元素留下任何位置。

我刚刚将宽度属性从 .section 移动到 .mainSection:http://jsfiddle.net/z7zvfe8n/4/

 .mainSection {
    line-height: 25px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    float: left; 
    width: 70%;
}