尝试将左侧边栏和后边的主要内容取出

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

只是改变了这一点：带来<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 2

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

Answer 3

只需添加浮动：正确的first_article

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

如果你在Firefox上使用firebug。它非常强大的开发工具

Answer 4

加浮动权

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