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

在我目前正在开发的流体宽度布局中，将所有旁侧元素与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;
}

最佳答案

您的问题是您正在为子元素设置宽度，而.mainSection仍占据宽度的100％，因为默认情况下，这就是带有display: block的元素的行为。这在您的aside元素右边没有位置。

我只是将width属性从.section移到.mainSection：http://jsfiddle.net/z7zvfe8n/4/

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