Question

我正在进行网格布局，但我希望div能够填充所有的空白区域而不仅仅是并排。我根据自己的知识尝试了一切，但我无法弄明白。我有什么遗失的吗？

这是JSFiddle中的代码：https://jsfiddle.net/y3s6b8dm/2/

如果你看，右边的.sml应该是4个方格，但只放2个，然后它会进入下一行。它以这种方式弄乱整个网格。

我希望它看起来像混合：

＆＃13;

body {
  width: 1200px;
  padding: 0;
  margin: 0;
}
.sml {
  background-image: url("http://placehold.it/1x1");
  border: 1px #a1a1a1 solid;
  width: 200px;
  height: 200px;
  vertical-align: top;
  position: relative;
  display: inline-block;
  box-sizing: border-box; 
}
.med {
  background-image: url("http://placehold.it/1x1");
  border: 1px #a1a1a1 solid;
  width: 300px;
  height: 300px;
  position: relative;
  display: inline-block;
  box-sizing: border-box; 
}
.big {
  background-image: url("http://placehold.it/1x1");
  border: 1px #a1a1a1 solid;
  width: 400px;
  height: 400px;
  position: relative;
  display: inline-block;
  box-sizing: border-box; 
}
.feat {
  background-image: url("http://placehold.it/1x1");
  border: 1px #a1a1a1 solid;
  width: 1200px;
  height: 400px;
  position: relative;
  display: inline-block;
  box-sizing: border-box; 
}
  height: 200px;
  position: relative;
  display: inline-block;
  box-sizing: border-box; 
}
.med {
  background-image: url("http://placehold.it/1x1");
  border: 1px #a1a1a1 solid;
  width: 300px;
  height: 300px;
  position: relative;
  display: inline-block;
  box-sizing: border-box; 
}
.big {
  background-image: url("http://placehold.it/1x1");
  border: 1px #a1a1a1 solid;
  width: 400px;
  height: 400px;
  position: relative;
  display: inline-block;
  box-sizing: border-box; 
}
.feat {
  background-image: url("http://placehold.it/1x1");
  border: 1px #a1a1a1 solid;
  width: 1200px;
  height: 400px;
  position: relative;
  display: inline-block;
  box-sizing: border-box; 
}

＆＃13;

<body><div class="feat"></div><div class="big"></div><div class="big"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="med"></div><div class="med"></div><div class="med"></div><div class="med"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div>

＆＃13;

Answer 1

如果您比较您提供的图片中描绘的图案，则与代码相比，尺寸不匹配。比率是：

图像

.sml 1x1
.med 2x2
.big 3x3

CSS

.sml 1x1
.med 1.5x1.5
.big 2x2

我假设您想要图像中的内容，因此我根据图像中显示的比例更改了尺寸。我还将所有内容缩小到20％（乘以5到原始大小），以便更轻松地查看Snippet。

其他弹性容器*被包裹在方块周围：

section.col1
section.col2
section.col3
section.sub2

身体也被赋予display:flex。虽然将来我会建议不要以有限的方式使用身体。而不是给身体一个固定的宽度，而是将所有内容包装在另一个元素中您应该考虑的另一件事是不使用固定尺寸进行布局。尝试相对单位em和/或百分比，以及一些内在类型，例如vw和vh。 px与em的默认浏览器比率为16：1（对于每16px = 1em）。在代码段中，您可以通过将px转换为em来使整个事情响应。

.sml {width:2.5em; height:2.5em;....

并用另一个元素替换身体。

main {width:15em....

<强>段

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  width: 240px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
}

.col1 {
  width: 80px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
}

.col2 {
  width: 120px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
}

.sub2 {
  display: flex;
  flex-direction: column;
}

.col3 {
  width: 40px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.sml {
  background: url("http://placehold.it/40x40/f00/fff?text=40x40")no-repeat;
  width: 40px;
  height: 40px;
}

.med {
  background: url("http://placehold.it/80x80/fc0/000?text=80x80")no-repeat;
  width: 80px;
  height: 80px;
}

.big {
  background: url("http://placehold.it/120x120/000/fc0?text=120x120")no-repeat;
  width: 120px;
  height: 120px;
}

.feat {
  background: url("http://placehold.it/240x80/00f/000?text=280x80")no-repeat;
  width: 280px;
  height: 80px;
}

<body>
  <div class="feat"></div>
  <section class='col1'>
    <div class="sml"></div>
    <div class="sml"></div>
    <div class="sml"></div>
    <div class="sml"></div>
    <div class="med"></div>
    <div class="sml"></div>
    <div class="sml"></div>
  </section>
  <section class='col2'>
    <div class="big"></div>
    <section class='sub2'>
      <div class="sml"></div>
      <div class="sml"></div>
    </section>
    <div class="med"></div>
  </section>
  <section class='col3'>
    <div class="sml"></div>
    <div class="sml"></div>
    <div class="sml"></div>
    <div class="sml"></div>
    <div class="sml"></div>
  </section>
</body>

* flex容器：一个术语，用于引用具有属性display:flex的元素，该元素会影响其所有子元素（称为flex项）以遵守flexbox布局规则。

如何使Div填充剩余空间？

1 个答案:

图像

CSS