li 개수에 따라 폭(width) 나누기

노드 수에 맞게 이미지 가로 너비를 조절한다.

 

HTML

 <ul>
   <li><img src="/images/re/sample/po1.png" /></li>
   <li><img src="/images/re/sample/po2.png" /></li>
   <li><img src="/images/re/sample/po3.png" /></li>
   <li><img src="/images/re/sample/po4.png" /></li>
</ul>

 

CSS

.photo_box{display: inline-block;}
.photo_box ul li {overflow: hidden; float: left; height: 160px; margin-right: 1%;}
.photo_box ul li:only-child {width: 100%; margin-right: 0%;} 
.photo_box ul li:nth-last-child(2), .photo_box ul li:nth-last-child(2)+li {width: 49%;} 
.photo_box ul li:nth-last-child(3), .photo_box ul li:nth-last-child(3)~li {width: 32%;}
.photo_box ul li:nth-last-child(4), .photo_box ul li:nth-last-child(4)~li {width: 24%;}
.photo_box ul li:last-child{margin-right: 0%;}
.photo_box ul li img {width: 200%; margin-left: -40%;}