CSS 크기가 서로 다른 상자가 서로 일치합니다.

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>

은 그럼 당신은 내가 필요에 따라 지정된 값을 조정해야합니다.