Question

我正在尝试向左侧添加侧边栏，而主要内容就在它之后。现在主要内容位于左侧，侧边栏位于右侧。两者都浮动到左边，但主要内容是第一个。我希望侧边栏成为第一个。

jsfiddle - http://jsfiddle.net/vzk8hqrq/

<section class="first_article">
    <article>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <img src="cupcake.jpg" alt="cupcake" class="cupcake">
    </article>
</section>

<aside class="sidebar">
    <nav>
        <ul>
            <li>home</li>
            <li>about us</li>
            <li>orders</li>
            <li>gallery</li>
            <li>contact</li>
        </ul>
    </nav>
</aside>



.first_article{
float:left;
border:1px solid black;
width:500px;
}

.sidebar{
float:left;
}

Answer 1

我建议您将内容的float属性设置为right。

Answer 2

只需在first_article上添加float：right

.first_article {
    border: 1px solid black;
    float: right;
    width: 500px;
}

如果您使用的是Firefox，请使用firebug。它非常强大的开发人员工具

Answer 3

刚改变了：<aside class="sidebar">

之前<section class="first_article">

Working Fiddle

<aside class="sidebar">
    <nav>
        <ul>
            <li>home</li>
            <li>about us</li>
            <li>orders</li>
            <li>gallery</li>
            <li>contact</li>
        </ul>
    </nav>
</aside>

<section class="first_article">
    <article>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <img src="cupcake.jpg" alt="cupcake" class="cupcake">
    </article>
</section>

Answer 4

向右添加浮动

.first_article{
float:right;
border:1px solid black;
width:500px;
}

试图在左侧添加侧边栏，在其后面添加主要内容

4 个答案: