Question

在我正在开发的流体宽度布局中，使用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元素位于其右侧。

我刚将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%;
}

让<aside>与mainSection水平对齐</aside>

1 个答案: