Question

我正在做我的个人投资组合网站并遇到了一些问题。

我想这样做（我希望我已经解释得很好）： http://itu.dk/people/mbul/portfolio/problem_portfolio.jpg

黑匣子代表了我所做的不同设计案例。

基本上我正在寻找的是在不同的屏幕尺寸上有效地使用容器的整个宽度，我希望它能够以最简单和语义正确的方式完成： - ）

谢谢！

Answer 1

我建议将框margin:auto;居中，并为其提供width:100%;和max-width:300px;。看看什么对你有用，但这可能会让你朝着正确的方向前进。

Answer 2

您可以通过多种方式完成此操作。最简单的方法是使黑色块浮动，边距和宽度之和应为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>

响应框布局

2 个答案: