嘗試將左側邊欄和後邊的主要內容取出

我試圖在主內容恰好位於左側的同時獲取側邊欄。現在，主要內容位於左側，側邊欄位於右側。兩者都浮動到左側，但主要內容是第一。我希望側欄成爲第一。嘗試將左側邊欄和後邊的主要內容取出

的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; 
}

來源

2014-09-04 Ralphunreal

這是你尋找的是http：//的jsfiddle。 net/vzk8hqrq/1/ – Jatin 2014-09-04 02:55:42

make .first_article float：right – Sunand 2014-09-04 02:58:36

我知道我可以漂浮它，但是那麼它們之間有很大的空間。 – Ralphunreal 2014-09-04 03:04:34

只是改變了這一點：帶來<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>

來源

2014-09-04 03:08:53 Jatin

我建議你內容的float屬性設置爲right。

來源

2014-09-04 02:58:28 Allan

只需添加浮動：正確的first_article

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

如果你在Firefox上使用firebug。它非常強大的開發工具

來源

2014-09-04 03:07:10

加浮動權

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

來源

2014-09-04 03:14:09 Akshay

你應該解釋爲什麼這會工作。 – Cfreak 2014-09-04 04:10:48

嘗試將左側邊欄和後邊的主要內容取出

回答

相關問題