響應式框佈局

Question

我正在做我的個人作品集網站，並遇到一些問題。

我想這樣做（我希望我已經解釋不夠好）： http://itu.dk/people/mbul/portfolio/problem_portfolio.jpg

黑框代表了不同的設計情況下，我已經做到了。

基本上就是我要找的是有效地利用容器在不同屏幕尺寸的全寬，我想它做的最簡單和語義正確的方式可能:-)

謝謝！

Answer 1

你可以用幾種方法做到這一點。最簡單的方法probally正在黑塊浮在利潤率和寬度之和應爲100％，如下：

<style type="text/css"> 
    .gray {background-color: #DDD; width: 400px; height: 400px;} 
    .black {background-color: #333; width: 40%; height: 40%; float: left; margin-left: 20%;} 
    .black.first {margin-left: 0;} 
</style> 

<div class="gray"> 
    <div class="black first"> 

    </div> 

    <div class="black"> 

    </div> 
</div> 

Answer 2

我建議把盒子對準margin:auto;並給他們一個width:100%;和max-width:300px;。看看什麼對你有用，但這可能會讓你在正確的方向。