html - 将 DIV 拆分为行和列

Question

很抱歉，如果之前有人问过这个问题，但我找不到完全相同的问题。

所以我有一个#container div，它包含网页内容的主要部分。

我想做一个子 div，这样我就可以在这个容器中创建行，每行的高度都是固定的。

然后在每一行内有 1 个(100% 宽度)或 2 个(每个 48% 宽度(每个之间有间隙))或 3 个(每个 30% 宽度)部分。

所以我想该页面能够具有以下布局(或任何组合，具体取决于 HTML)

只需要在css/html中完成

因此整个黑色容器都有背景，红色/绿色/棕色容器也有背景色:rgba(0,0,0,0.5)

我试过只用 div 来做

例如，一个宽度为 100%，然后在其中放置 2 个 %50 宽度的 div，但即使我为每个 div 设置了最小宽度，它们也没有保持完整尺寸。

有人可以帮助处理 css/html 结构。

非常感谢。

Answer 1

我做了你的布局，虽然解释它需要一些时间，但最好是 fiddle 这样您就可以查看了。

而且，因为我需要输入代码，所以这是涉及的简单 css:

* {
    box-sizing: border-box;
}
.container {
    width:100%;
    max-width:600px;
    border:2px solid black;
    margin: 0 auto;
    padding:10px;
}
.row {
    height:100px; /*set height*/
    border:2px solid blue;
    width:100%;
    margin-bottom:10px;
    padding:10px;
}
.col1 {
    border:2px solid red;
    width:100%;
    height:100%;    
}
.col2 {
    border:2px solid green;
    width:49%;
    float:left;
    height:100%;
    margin-right:2%;    
}
.col2:last-child {margin-right:0;  }
.col3 {
    border:2px solid brown;
    width:32%;
    float:left;
    height:100%;
    margin-right:2%;    
}
.col3:last-child {margin-right:0;  }

(顺便说一句，它是响应式的)