使用Flexbox CSS可以實現這種響應式佈局嗎？

我很苦惱這個佈局。

<article> 
    <section class="content">1</section> 
    <aside class="ads">2</aside> 
    <section class="comments">3</section> 
</article>

在全寬我要評論坐直屬機構，主要內容和一旁左側。但在移動設備上，我希望評論位於頁面底部，廣告位於中間。

enter image description here

也許我是在錯誤的軌道與Flexbox的呢？我使用float的問題是，如果旁邊的內容長於內容，則評論將被推送到頁面的較遠處。

來源

2014-05-12 user3627605

您有一篇文章包裝段和旁白？任何jsfiddle這個玩嗎？ – valerio0999

是的可能 –

@nol通常遵循的是對HOW的解釋。 –

-1

試試這個例子CSS。

的Html

<article> 
    <section class="content">1</section> 
    <aside class="ads">2</aside> 
    <section class="comments">3</section> 
</article>

CSS正常

article{width:870px; margin:0 auto;} 
.content{background-color:#0C0; float:left; width:700px; min-height:300px; margin:0 0 10px;} 
.ads{background-color:#06F; width:150px; float:right; min-height:450px; margin:0 0 10px;} 
.comments{background-color:#F00; float:left; width:700px; min-height:150px;}

CSS的響應

article{width:100%;} 
.content{float:none; width:auto; } 
.ads{width:150px; float:right; min-height:450px; margin:0 0 10px;} 
.comments{float:none; width:auto; }

來源

2014-05-13 12:09:14 HarnishDesign

使用Flexbox CSS可以實現這種響應式佈局嗎？

回答

相關問題