異なるサイズの箱がお互いに合っています

Question

箱からレイアウトを作りたいと思います。

問題は私の第二列は、私は私のサイトは幅が縮小したときに、それはそう、最後のボックスが左にラップするようにしようよ、私の大きな箱の下に行くことです。画像の順序は関係ありません。 私はこれがどんな形でも可能であることを望みます。私はHTMLとCSS上で進歩しているわけではありません。私はポートフォリオの面白いサイトを作ろうとしています。

お読みいただきありがとうございました

Answer 1

このコードは、あなたの問題を解決する可能性があります。 --CSS--

.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; 
 
    } 
 
}

<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>

Answer 2

あなたは親にcolumn-count財産とmediaクエリでこのような何かを行うことができます。

* {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 */ 
 
    } 
 
}

<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>

Answer 3

をあなたは使用することがありますflexこのように：

* { 
 
    box-sizing: border-box 
 
} 
 

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

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

<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>

次に、あなたは私があなたのニーズに応じて、指定された値を調整する必要があります。