Question

我正在制作完全适合矩形的图像拼贴，到目前为止，我已设法为它创建顶层。然而最后一行让我很困惑，因为我似乎无法使用CSS将它们放到位。（您可能需要通过浏览器运行它才能清楚地看到它）

＆＃13;

  var container = document.querySelector('#grid');
  var masonry = new Masonry(container, {
    columnWidth: 1346,
    itemSelector: '.grid-item'
  });

＆＃13;

.grid-item {
  float: left;
  border: 0px solid transparent;
}
.grid-item--width146x100 {
  width: 125px;
  height: 100px;
  float: right
}
.grid-item--width146x300 {
  width: 125px;
  height: 300px;
  float: right
}
.grid-item--width200x100 {
  width: 200px;
  height: 100px
}
.grid-item--width200x200 {
  width: 200px;
  height: 200px
}
.grid-item--width300 {
  width: 300px;
  height: 200px
}
.grid-item--width500x200 {
  width: 500px;
  height: 200px
}
.grid-item--width500x400 {
  width: 500px;
  height: 400px
}
.grid-item--width200x200(1) {
  width: 500px;
  height: 400px
}
.grid-item--width200x100(1) {
  width: 500px;
  height: 400px
}

＆＃13;

<div id="grid">
  <div class="grid-item grid-item--width300">
    <img src="http://s30.postimg.org/njfrtgaoh/300x200.png" alt="" />
  </div>
  <div class="grid-item grid-item--width200x100">
    <img src="http://s11.postimg.org/v0d12pcyr/200x100_2.png" alt="" />
  </div>
  <div class="grid-item grid-item--width500x400">
    <img src="http://s22.postimg.org/s8jfeeiep/500x400.png" alt="" />
  </div>
  <div class="grid-item grid-item--width200x200(1)">
    <img src="http://s22.postimg.org/uxiti6d9t/200x200_2.png" alt="" />
  </div>
  <div class="grid-item grid-item--width146x100">
    <img src="http://s13.postimg.org/463k9fm8j/146x100.png" alt="" />
  </div>
  <div class="grid-item grid-item--width200x100(1)">
    <img src="http://s14.postimg.org/prasnic9d/200x100.png" alt="" />
  </div>
  <div class="grid-item grid-item--width500x200">
    <img src="http://s30.postimg.org/hz3aitbtd/500x200.png" alt="" />
  </div>
  <div class="grid-item grid-item--width200x200">
    <img src="http://s8.postimg.org/56vmkw3kl/200x200.png" alt="" />
  </div>
  <div class="grid-item grid-item--width146x300">
    <img src="http://s23.postimg.org/670g2cmaz/146x300.png" alt="" />
  </div>
</div>

＆＃13;

Answer 1

Div维度应按比例整齐排列。

此处您提到的尺寸不是比例。

.grid-item--width146x100 {
  width: 125px;
  height: 100px;
  float: right
}
.grid-item--width146x300 {
  width: 125px;
  height: 300px;
  float: right
}
.grid-item--width200x100 {
  width: 200px;
  height: 100px
}
.grid-item--width200x200 {
  width: 200px;
  height: 200px
}
.grid-item--width300 {
  width: 300px;
  height: 200px
}
.grid-item--width500x200 {
  width: 500px;
  height: 200px
}
.grid-item--width500x400 {
  width: 500px;
  height: 400px
}

所以纠正它们并保持它们的比例，例如。

.grid-item-1 {
      width: 150px;
      height: 200px
    }

.grid-item-2 {
      width: 300px;
      height: 400px
    }

.grid-item-3 {
      width: 75px;
      height: 100px
    }

由于

图像的HTML / CSS拼贴整齐地适合矩形

1 个答案: