html - 使 div 在给定宽度内调整，其余部分应中断到下一行

Question

我在我们的项目中有一个现有的设计。我们有 4 个 div，它们排列成两行和两列。

但是根据客户的新要求，我们可以有多个 div 并且包含它的容器应该允许 100% 宽度，并且内部 div 需要在该宽度内并排调整，如果宽度不够，那么剩余的 div 应该分解和开始另一行。

<div class="container">
    <div class="block1"></div>
    <div class="block2"></div>
    <div class="block3"></div>
    <div class="block4"></div>
</div>

.container {
    width: 400px;
    position: relative;
}
.block1 {
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}
.block2 {
    position: absolute;
    left: 200px;
    top: 0;
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}
.block3 {
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}
.block4 {
    position: absolute;
    left: 200px;
    top: 200px;
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}

这类似于我们现有的设计。http://jsfiddle.net/NE3r​​Z/

请建议我如何使上述设计具有响应性。

Answer 1

您可以使内部 div 向左浮动{ float: left }

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

然后你的CSS

.container {
    width: 100%;
}
.block {
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
    float: left;
}

检查这个http://jsfiddle.net/NE3r​​Z/2/。您可以尝试调整宽度。