CSS 배열이 다른 크기의 목록 항목을 깔끔한 행으로 배열합니다.

Question

목록으로로드되는 이미지가 있고, 일부는 세로 방향이며, 일부는 가로 방향이지만 이미지를 깔끔하고 왼쪽 정렬해야합니다. 이건 내 HTML입니다

#designgallery 
{ 
    list-style-type:none; 
    margin-top:15px; 
    float:left; 
} 

#designgallery li 
{ 
    display:block; 
    margin:5px; 
    background-color:#eee; 
    padding:5px; 
    float:left; 
} 
.design-display 
{ 
    border:1px solid gray; 
} 
.Horizontal 
{ 
    width:210px; 
    height:122px; 
} 
.Vertical 
{ 
    height:180px; 
    width:122px; 
} 

: 이것은 내 CSS 코드

<ul id="designgallery"> 
<li> <img class="design-display Horizontal" src="1.jpg" /><!--some other stuff--> </li> 
... many list items, some horizontal, some vertical 
</ul> 

그러나 이것은 내가 무엇을 얻을 수 있습니다 :

오른쪽 하단 모서리에 수직 이미지 왼쪽의 새로운 이미지 라인을 시작해야합니다. 어떻게해야합니까?

Answer 1

'석공 술'효과를 원한다면 Javascript가 해결책입니다.

자바 스크립트가 옵션이 아니며 수직 및 수평 이미지의 최대 너비/높이를 알고있는 경우 li 요소 like in this fiddle에 최대 크기를 적용하여 맞춤을 강제 설정할 수 있습니다.

단점은 이미지 주위에 디자인 요구 사항에 따라 바람직하지 않을 수있는 여분의 공간을 만들지 만 CSS로 "멋지게"보이게 만들 수 있습니다.