Question

如果之前有人问过，但我找不到完全相同的问题，请道歉。

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

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

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

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

layout

只需要在css / html中完成

因此整个黑色容器有背景，红色/绿色/棕色容器也有背景颜色：rgba（0,0,0,0.5）

我尝试用divs

做这件事

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

有人可以帮助解决css / html结构。

非常感谢。

Answer 1

从长远来看，可能是更好的解决方案是使用bootstrap框架（由twitter开发），它非常易于使用并且有很多额外的好处：

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

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

Answer 2

我做了你的布局，虽然解释它需要一些时间，更好的是 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;  }

（顺便说一下，它是有回应的）

Answer 3

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

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

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

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

Answer 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

Answer 5

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

我只是使用 HTML 和 CSS 来简单地完成了操作。基本上，我使用的是行和列，并以 div 隔开，但我没有给col加上边框，因为上面的代码提到了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;

}

**这里是输出：**

将DIV拆分为行和列

5 个答案: