CSS Float Degradation從底部到底

我試圖將浮動在我的頁面上的一個元素作爲一個右側邊欄，但爲了使退化，把元素放在內容之下和頁腳之上，爲較小的屏幕尺寸。以下是我迄今爲止：JSFiddle CSS Float Degradation從底部到底

<html> 
<head> 
<style type="text/css"> 
.footer{ 
    clear:both; 
    width:100%; 
    height:20px; 
} 

.sidebar{ 
    //float:bottom; 
} 

@media (min-width : 400px){ 
    .sidebar { 
     //float:right; 
     //width:20% 
    } 

    .grid { 
     float:left; 
     width:80% 
    } 

    .element { 
     float:left; 
     height:50px; 
     width:33%; 
    } 
}@media (min-width : 500px){ 
    .sidebar { 
     float:right; 
     width:20% 
    } 

    .grid { 
     float:left; 
     width:80% 
    } 

    .element { 
     float:left; 
     height:50px; 
     width:33%; 
    } 
} 
</style> 
</head> 
<body> 
    <div class='sidebar'> 
     <p>SIDEBAR: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec arcu sed ipsum placerat ornare id ut augue. Aliquam erat volutpat. Morbi laoreet tellus purus, vitae feugiat elit accumsan tincidunt. Pellentesque magna metus, pharetra ut mollis vel, dictum in purus. Mauris bibendum euismod lorem, luctus gravida turpis.</p> 
    </div> 
    <div class='content'> 
     <div class='grid'> 
      <h2>Section 1</h2> 
      <div class='element'> 
       <p>Box 1</p> 
      </div> 
      <div class='element'> 
       <p>Box 2</p> 
      </div> 
      <div class='element'> 
       <p>Box 3</p> 
      </div> 
      <div class='element'> 
       <p>Box 4</p> 
      </div> 
      <div class='element'> 
       <p>Box 5</p> 
      </div> 
     </div> 
     <div class='grid'> 
      <h2>Section 2</h2> 
      <div class='element'> 
       <p>Box 6</p> 
      </div> 
      <div class='element'> 
       <p>Box 7</p> 
      </div> 
      <div class='element'> 
       <p>Box 7</p> 
      </div> 
      <div class='element'> 
       <p>Box 9</p> 
      </div> 
     </div> 
    </div> 
    <div class='footer'> 
     <p>FOOTER: Lorem ipsum dolor sit amet.</p> 
    </div> 
</body> 
</html>

我的問題是，當屏幕小於500px的側邊欄進入頂部，而不是底部。我似乎無法弄清楚如何讓它「浮」到底部。在內容下面，我嘗試了float:bottom，但顯然這沒有奏效。任何想法或建議？

來源

2014-05-23 amaster

你不能做到這一點與「常規」單獨（除非你想用Flexbox的）CSS，只要側邊欄是您的代碼/ DOM中的第一個元素。你必須改變'＃sidebar'和'＃content'的順序才行。 – CBroe

你必須改變你的邊欄和內容的順序（內容更重要的開始）。 See fiddle

HTML：

<div class='content'> 
    <div class='grid'> 
     <h2>Section 1</h2> 
     <div class='element'> 
      <p>Box 1</p> 
     </div> 
     <div class='element'> 
      <p>Box 2</p> 
     </div> 
     <div class='element'> 
      <p>Box 3</p> 
     </div> 
     <div class='element'> 
      <p>Box 4</p> 
     </div> 
     <div class='element'> 
      <p>Box 5</p> 
     </div> 
    </div> 
    <div class='grid'> 
     <h2>Section 2</h2> 
     <div class='element'> 
      <p>Box 6</p> 
     </div> 
     <div class='element'> 
      <p>Box 7</p> 
     </div> 
     <div class='element'> 
      <p>Box 7</p> 
     </div> 
     <div class='element'> 
      <p>Box 9</p> 
     </div> 
    </div> 
</div> 

<div class='sidebar'> 
    <p>SIDEBAR: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec arcu sed ipsum placerat ornare id ut augue. Aliquam erat volutpat. Morbi laoreet tellus purus, vitae feugiat elit accumsan tincidunt. Pellentesque magna metus, pharetra ut mollis vel, dictum in purus. Mauris bibendum euismod lorem, luctus gravida turpis.</p> 
</div> 
<div class='footer'> 
    <p>FOOTER: Lorem ipsum dolor sit amet.</p> 
</div>

CSS

.footer{ 
    clear:both; 
    width:100%; 
    height:20px; 
} 

.sidebar{ 
    float: right; 
} 

.content { 
    float: left; 
} 

@media (min-width : 400px){ 
    .sidebar { 
     //float:right; 
     //width:20% 
    } 

    .grid { 
     float:left; 
     width:80% 
    } 

    .element { 
     float:left; 
     height:50px; 
     width:33%; 
    } 
} 

@media (min-width : 500px){ 
    .sidebar { 
     float:right; 
     width:20% 
    } 

    .grid { 
     float:left; 
     width:80% 
    } 

    .element { 
     float:left; 
     height:50px; 
     width:33%; 
    } 
}

來源

2014-05-23 18:57:03

謝謝你，你是一位神智不清的學者。我忘記了這是生活中簡單的東西。我嘗試非常類似，但我忘了做內容上的浮動哦！ – amaster

CSS Float Degradation從底部到底

回答

相關問題