在CSS中具有相对高度和不同大小的Flex网格

Question

我想要实现的目标

我正在研究这样的网格：

固定宽度和高度没有问题。但我无法使用相对宽度和高度来工作。每个盒子都需要是一个正方形。它们的宽度为100％。高度应该相同，所以不是硬编码。每个Box将在中间/中间显示图像。

无论我尝试什么（自举网格，弹性，硬编码填充等），我都无法完成它。

我感谢任何帮助！

Answer 1

检查以下内容。我认为这就是你所需要的。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

.container {
  display: flex;
}

.big-image {
  padding: 50px;
  background-color: black;
  margin-right: 1em;
}

.small-image {
  padding: 50px;
  background-color: black;
  margin-right: 1em;
}

.small-images .small-image:nth-child(1) {
  margin-bottom: 1em;
}

＆＃13;

<div class="container">
  <div class="big-image"><img src="http://placehold.it/300"></div>
  <div class="small-images">
    <div class="small-image"><img src="http://placehold.it/100"></div>
    <div class="small-image"><img src="http://placehold.it/100"></div>
  </div>
  <div class="small-images">
    <div class="small-image"><img src="http://placehold.it/100"></div>
    <div class="small-image"><img src="http://placehold.it/100"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用jQuery设置di​​v的高度等于它们的宽度。

    <script>
    $(document).ready(function () {
        giveHeight();
        $(window).resize(function () { giveHeight() });
    });
    function giveHeight() {
        $(".col-xs-6").each(function () {
            $(this).height($(this).css("width"));
        });
    }
</script>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 red">BIG</div>
        <div class="col-xs-6">
            <div class="row ">
                <div class="col-xs-6 red">1</div>
                <div class="col-xs-6 red">2</div>
                <div class="col-xs-6 red">3</div>
                <div class="col-xs-6 red">4</div>
            </div>
        </div>
    </div>
</div>