[예제1] - 이미지
<style>
.hz{display: inline-block;}
.hz ul li {overflow: hidden; float: left; margin-right: 1%;}
.hz ul li:only-child {width: 100%; margin-right: 0%;}
.hz ul li:nth-last-child(2),
.hz ul li:nth-last-child(2)+li {width: 49%;}
.hz ul li:nth-last-child(3),
.hz ul li:nth-last-child(3)~li {width: 32%;}
.hz ul li:nth-last-child(4),
.hz ul li:nth-last-child(4)~li {width: 24%;}
.hz ul li:last-child {margin-right: 0%;}
.hz ul li img {width: 200%; height:auto; margin-left: -40%;}
</style>
<div class="hz">
<ul>
<li><img src='https://source.unsplash.com/random'></li>
<li><img src='https://source.unsplash.com/random'></li>
<li><img src='https://source.unsplash.com/random'></li>
<li><img src='https://source.unsplash.com/random'></li>
</ul>
</div>
결과보기
[예제2] - 리스트
<style>
body {
margin:0;
}
ul {
padding: 0 1em;
margin: 1em 0;
list-style: none;
}
ul:after {
display: block;
content: "";
clear: both;
}
li {
float: left;
outline: 2px solid gray;
font-weight: bold;
text-align: center;
line-height: 2;
}
/* one item */
li:first-child:nth-last-child(1) {
width: 100%;
background-color: hsl(0,100%,80%);
}
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
background-color: hsl(60,100%,80%);
}
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
background-color: hsl(120,100%,80%);
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
background-color: hsl(180,100%,80%);
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
결과보기
