响应式框布局

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;。看看什么对你有用，但这可能会让你在正确的方向。