将 DIV 拆分为行和列答案

【问题标题】：Splitting a DIV into rows and columns将 DIV 拆分为行和列
【发布时间】：2020-07-17 16:55:17
【问题描述】：

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

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

我想制作一个子 div，以便我可以在这个容器中创建 Rows，每个固定高度。

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

所以我会想象页面能够具有以下布局（或任何组合，取决于 HTML）

只需要在css/html中完成

这样整个黑色容器都有背景，红色/绿色/棕色容器也有背景色：rgba(0,0,0,0.5)

我试着只用 div 来做

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

有人可以帮忙看看 css/html 结构吗？

非常感谢。

【问题讨论】：

inline-block 是你的朋友
看看像 Twitter Bootstrap 这样的 CSS 框架？
帮自己一个忙，看看 CSS flexbox。它是现代的，非常易于使用，跨浏览器兼容并且非常适合这样的布局。 css-tricks.com/snippets/css/a-guide-to-flexbox

标签： html css

【解决方案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;  }

（顺便说一句。它是响应式的）

【讨论】：

【解决方案2】：

从长远来看，更好的解决方案可能是使用引导框架（由 twitter 开发），它使用起来非常简单，并且有很多好处：

Bootstrap 包括一个响应式、移动优先的流体网格系统，随着设备或视口大小的增加，它可以适当地扩展到 12 列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大 mixin。

http://getbootstrap.com/css/#grid

【讨论】：

为什么这个问题在许多 lvls 中是错误的，这不是问题的答案，只是一些关于 OP 可能采取的步骤的建议。

【解决方案3】：

JSfiddle：https://jsfiddle.net/gqq7poje/1/

如 cmets 中所述，您使用 display:inline-block 在一行中有多个列。但是inline-block 将空格视为字符，因此很难用width:50% 容纳两列。如此处所示：display: inline-block extra margin 您可以通过将font-size: 0px; 添加到整行来解决此问题。

为了在列之间有边距，您将width:48% 和margin:1%; 设置为具有两个的行。

正如其他人所建议的那样，考虑使用 Bootstrap，因为它可以处理制作列的许多细微差别。

【讨论】：

【解决方案4】：

也许是这样的。 HTML：

<div id="container">
 <div class="row single">Your content</div>
 <div class="row double">
  <div class="column-2 left">Your content</div>
  <div class="column-2 right">Your content</div>
 </div>
 <div class="row triple">
  <div class="column-3 left">Your content</div>
  <div class="column-3 center">Your content</div>
  <div class="column-3 right">Your content</div>
 </div>
</div>

CSS：

#container { width: 80%; margin: auto; background-color: grey; padding: 20px; }
.row { height: 150px; margin-bottom: 20px; position: relative; }
.row div { height: 100%; }
.single { background-color: white; }
.column-2 { width: 48%; }
.column-3 { width: 30%; }
.left { background-color: yellow; float: left; }
.center { float: left; margin: 0 5%; background-color: orange; }
.right { background-color: green; float: right; }

See a fiddle.

【讨论】：

【解决方案5】：

我为您提供了查询的解决方案。

我只是使用 HTML 和 CSS 以简单的方式完成。基本上我使用 rows 和 columns 分隔 div 并且我没有给 col 的边框你可以很容易地在 css 中给出上面的代码提到了 josliber 和 Alvora。

它也反应灵敏，应该可以完成您的工作。

所以这里的代码是：

注意：如果格式错误，请重新格式化......

HTML 代码（粘贴在正文中）：


    <div class="container-fluid">
        <div id="my_row_edits" class="row">
            <div id="my_col_edits" class="col">
                <label class="my_profile_label_edit" for="">Maddy's Profile</label>
                <p id="my_1">first row | one col</p>
            </div>
        </div>

        <div id="my_row_edits" class="row">
            <div id="my_col_edits" class="col">
                <p>Maddy_2.1</p> 
                <p>second row | first col</p>
            </div>
            <div id="my_col_edits" class="col">
                <p>Maddy_2.1</p> 
                <p>second row | second col</p>
            </div>
        </div>

        <div id="my_row_edits" class="row">
            <div id="my_col_edits" class="col">
                <p>Maddy_2.1</p> 
                <p>third row | first col</p>
            </div>

            <div id="my_col_edits" class="col">
                <p>Maddy_2.1</p> 
                <p>third row | second col</p>
            </div>

            <div id="my_col_edits" class="col">
                <p>Maddy_3.3./p> 
                <p>third row | third col</p>
            </div>
        </div>
    </div>

CSS 代码（如果您愿意，请重命名 ID）：


#my_row_edits{

    width: 100%;
    position: relative;
    align-items: center;
    justify-content: center;

}

#my_col_edits{

    width: 100%;
    height: 200px;
    position: relative;
    align-items: center;
    justify-content: center;

}


.my_profile_label_edit{

    top: 0%;
    color: black;
    position: absolute;
    margin-left: 35%;
    font-size: 400%;
    font-weight: lighter;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

p{
    top: 30px;
    position: relative;
    text-align: center;

}

#my_1{

    top: 100px;
    position: relative;

}

**这里的输出：**

【讨论】：