Question

我有以下4个方格（两行和两列）：

<section id="gallery">
  <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                    
                 <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                 </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                    
                <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                    
                <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                    
                <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                </div>
            </div>
        </div>
    </div>
</section>

我希望它们以4平方的方式显示，并且网格占据页面的整个宽度和高度。我也希望它具有响应性，我不希望每个方格之间有任何空格。

我尝试在我的section标签上设置css，如下所示：

section
{
  height: 100vh;
}

但这没有效果。有人知道怎么做到这一点吗？

谢谢

Answer 1

尝试将其作为CSS

section#gallery
{
    height:100%;
    width:100%;
}

div.row
{
    height:50%;
}

div.col-lg-6.col-md-6.col-sm-6.col-xs-12
{
    width:50%;
}

Answer 2

我认为你在找这样的东西？ https://jsfiddle.net/01djtnyd/

注意：我已将所有课程更改为＆＃34; -6＆＃34;所以你可以在小提琴中轻松看到它

将类no-padding添加到包装img div的div中

在css中添加：

.no-padding {
  padding: 0 !important;
  margin: 0;
}

.no-padding > div {
  background-repeat: no-repeat;
  background-size: cover;
  height: 50vh;
}

Answer 3

您可以使用css flexbox和jQuery执行此操作。以下两个选项可以维护每个div的square形状。

选项1：

HTML：

<section id="gallery">
  <div class="container-fluid">
        <div class="row grid-wrapper">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">                    
                 <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                 </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">                    
                <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                </div>
            </div>
        </div>
        <div class="row grid-wrapper">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">                    
                <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">                    
                <div style="background-image: url(http://placehold.it/675x400)">&nbsp;
                </div>
            </div>
        </div>
    </div>
</section>

CSS：

section
{
  height: 100vh;
}
.grid-wrapper{
  display: flex;
  flex-direction: row;
}
.grid-block{
  margin: 0;
  padding: 0;
  background-color: #e2e2e2;
  border: 1px solid #000;
}

Jquery的：

$(document).ready(function(){
    var grid_w = $(".grid-block").width();
  $(".grid-block").height(grid_w);
});

小提琴：https://jsfiddle.net/puxLmy1y/2/

选项2（不带jQuery）：

HTML：与上述相同

CSS：

section
{
  height: 100vh;
}
.grid-wrapper{
  display: flex;
  flex-direction: row;
}
.grid-block{
  width: 50vh;
  height: 50vh;
  margin: 0;
  padding: 0;
  background-color: #e2e2e2;
  border: 1px solid #000;
}

小提琴：https://jsfiddle.net/puxLmy1y/3/

自举网格填充页面宽度和高度

3 个答案: