Question

我很难弄清楚如何解决一个看似简单的问题。我要求制作一个2x2的盒子布局，它将填满整个屏幕，然后分解成一定宽度的单个列。

分解部分并不是真正的问题，它是我正在努力解决的2x2网格。

我试图用这样的东西来做：

.outer-div{
  display: table;
  width: 100%;
  height: 100%;
}
.inner-div{
  display: table-row;
  width: 100%;
  height: 100%;
}
.inner-block{
  display: table-cell;
  width: 50%;
  height: 100%;
}

这种作品，但似乎不是很流畅。至少，不是我所期望的。有没有更好的方法来实现这一目标？任何想法都非常感谢！

（附图为视觉参考）

修改好的，所以我觉得自己像个白痴。我的解决方案是工作，问题是我有另一个div显示一些绝对定位的内容和固定的高度，我不知道如何解释。请参阅小提琴，例如：https://jsfiddle.net/q2j940r1/1/

Answer 1

这个问题在很大程度上取决于您的实施。

您需要一个带有许多div的tabellar 2x2解决方案，可以在任何位置和环境中工作。我可以建议直接使用TABLE作为2x2布局中的容器：

绝对位置

宽度/高度100％

无边距/无边框

你说浏览器更简单，你得到更简单的渲染，这是我的建议

Answer 2

关键是将所有容器元素设置为height:100%，包括html和body标记。并为每个项目设置50％的宽度和高度。

<强> JsFiddle Example

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.container {
    font-size: 0; /*fix inline gaps*/
    height: 100%;
}
.item {
    font-size: 16px; /*reset font size*/
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 50%;
    position: relative;
    overflow: auto; /*for scrollbar*/
}
.content {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0; /*stretch and fill*/
}
.item:nth-child(1) { background: aqua; }
.item:nth-child(2) { background: lime; }
.item:nth-child(3) { background: gold; }
.item:nth-child(4) { background: teal; }

<div class="container">
    <div class="item">
        <div class="content">A - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
</div>

Answer 3

2x2网格布局：

我在这里创建了一个演示：http://jsfiddle.net/9pzvf6nb/

您还可以查看下面的代码段：

.col-1 {
    background: blue;
}

.col-2 {
    background: gray;
}

.col-3 {
    background: red;
}

.col-4 {
    background: green;
}

html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    height: 100%;
    width: 100%;
}
.container div {
    height: 50%;
    width: 50%;
    float: left;
    position: relative;
}

<div class="container">
    <div class="col-1">
    </div>
    <div class="col-2">
    </div>
    <div class="col-3">
    </div>
    <div class="col-4">
    </div>
</div>

我认为使用某种响应式网格系统也很有帮助，例如 Bootstrap 或基础。

Bootstrap： http://getbootstrap.com

基础CSS： http://foundation.zurb.com

此类库具有内置的12种网格布局，可帮助您轻松快速地创建基于网格的复杂布局。

Answer 4

我所知道的最简单的方法是使用一些Javascript和jQuery来设置div的高度。

运行下面的代码段或查看https://jsfiddle.net/rce4csfn/，看它是否根据窗口大小动态调整大小。

other_company

function setHeight(){
    var windowHeight = $( window ).height();
    $('.box').height(windowHeight / 2);
}

setHeight();

$( window ).resize(function(){
    setHeight();
});

*{margin:0px;}

.box{
    width:50%;
    height:100px;
    background-color:blue;
    box-sizing:border-box;
    float:left;
}

#one{background:#82FFFB;}
#two{background:#FFE382;}
#three{background:#E1FF83;}
#four{background:#FEBD87;}

Answer 5

您可以使用媒体查询以低于特定级别的分辨率打破一行中的块这是小提琴的 jsfiddle.net/s1gfLabf

创建2x2流体布局并填充整个屏幕

5 个答案:

2x2网格布局：