css不同大小的盒子互相对齐

Question

我想用盒子做个布局。

问题是我的第二行将放在我的大盒子下面，我试图这样做，所以当我的网站宽度缩小时，最后一个盒子将向左侧包裹。图像的顺序并不重要。 我希望这是可能的。我并不是那么先进的HTML和CSS我只是想为我的投资组合创建一个有趣的网站。

感谢阅读

Answer 1

您可以使用父级column-count查询的media属性执行此类操作：

＆＃13;

＆＃13;

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

.parent {
  column-count: 4; /* four images per row when full screen */
  column-gap: 10px; /* for horizontal gaps between img's */
}

.parent > img { /* responsiveness */
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin-bottom: 10px; /* vertical gap */
  page-break-inside: avoid;
  break-inside: avoid-column;
}

@media screen and (max-width: 768px) {
  .parent {
    column-count: 3; /* three images per row */
  }
}
@media screen and (max-width: 600px) {
  .parent {
    column-count: 2; /* two images per row */
  }
}
@media screen and (max-width: 480px) {
  .parent {
    column-count: 1; /* one image per row */
  }
}

＆＃13;

<div class="parent">
  <img src="https://i.ytimg.com/vi/b9lb-T9FrAg/maxresdefault.jpg" alt="">
  <img src="https://cdn.thinglink.me/api/image/703615529729916929/1240/10/scaletowidth" alt="">
  <img src="https://cdn.akc.org/Marketplace/Breeds/Siberian_Husky_SERP.jpg" alt="">
  <img src="http://i.huffpost.com/gen/2709324/images/o-BULLDOG-PUPPY-facebook.jpg" alt="">
  <img src="http://i.huffpost.com/gen/2709324/images/o-BULLDOG-PUPPY-facebook.jpg" alt="">
  <img src="https://cdn.akc.org/Marketplace/Breeds/Siberian_Husky_SERP.jpg" alt="">
  <img src="https://cdn.thinglink.me/api/image/703615529729916929/1240/10/scaletowidth" alt="">
  <img src="https://i.ytimg.com/vi/b9lb-T9FrAg/maxresdefault.jpg" alt="">
  <img src="https://i.ytimg.com/vi/b9lb-T9FrAg/maxresdefault.jpg" alt="">
  <img src="https://cdn.thinglink.me/api/image/703615529729916929/1240/10/scaletowidth" alt="">
  <img src="https://cdn.akc.org/Marketplace/Breeds/Siberian_Husky_SERP.jpg" alt="">
  <img src="http://i.huffpost.com/gen/2709324/images/o-BULLDOG-PUPPY-facebook.jpg" alt="">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以像这样使用flex：

＆＃13;

＆＃13;

* {
  box-sizing: border-box
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 500px;
}

.container img {
  width: 33%;
  border:2px solid #fff;
}

＆＃13;

<div class="container">
  <img src="https://lorempixel.com/200/100/" />
  <img src="https://lorempixel.com/300/400/" />
  <img src="https://lorempixel.com/200/200/" />
  <img src="https://lorempixel.com/300/100/" />
  <img src="https://lorempixel.com/500/200/" />
  <img src="https://lorempixel.com/200/400/" />
</div>

＆＃13;

＆＃13;

＆＃13;

然后你必须根据你的需要调整我指定的值。

Answer 3

此代码可能会解决您的问题。         --CSS--

＆＃13;

＆＃13;

.slidepanels {
  /* Prevent vertical gaps */
  text-align: right;
  line-height: 0;
  -webkit-column-count: 4;
  -webkit-column-gap: 8px;
  -moz-column-count: 4;
  -moz-column-gap: 8px;
  column-count: 4;
  column-gap: 8px;
}

.cycler {
  position: relative;
}

.cycler img:first-child {
  position: relative;
  z-index: 1;
}

.cycler img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}

.cycler img.active {
  z-index: 3;
}

.slidepanels div img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 3.6%;
}

@media (max-width: 620px) {
  .slidepanels {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 480px) {
  .slidepanels {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

＆＃13;

<div class="slidepanels">
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/d5/c4/37/d5c43719a8e57e08046258f3551ab5bd.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/b4/e2/6e/b4e26e25176a8bf4c5307645ef45f745.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/88/fb/b1/88fbb1d82e00027dcf3a42bfbd5bbdda.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/ed/2a/94/ed2a949af7ad6ceb70115c4ba0a4c1b6.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/d5/c4/37/d5c43719a8e57e08046258f3551ab5bd.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/b4/e2/6e/b4e26e25176a8bf4c5307645ef45f745.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/88/fb/b1/88fbb1d82e00027dcf3a42bfbd5bbdda.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/ed/2a/94/ed2a949af7ad6ceb70115c4ba0a4c1b6.jpg" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;