如何获得这个网格不能调整大小？

Question

我发现下面的图片网格（链接），我正在使用，但当前当网格调整大小的方块变小时，我喜欢它，因此方块落在彼此之下而不是调整大小。这怎么可能？我试着添加浮动和调整宽度，但我显然错过了一些愚蠢的东西？

link

CSS

.container { 
border: 1px solid #fff; 

ul { 
    display: block; 
    float: left; 
    width: 100%; 
} 

li { 
    box-sizing: border-box; 
    display: block; 
    float: left; 
    overflow: hidden; 
    position: relative; 
    padding-bottom: 33.3%; 
    width: 33.3%; 

    background-color: #000; 
    border: 2px solid #fff; 

&:hover { 
    h3 { 
    opacity: 1; 
    transition: all .3s ease-in-out .1s; 
    } 
    img { 
    opacity: 1; 
    transform: scale(1); 
    } 
} 

h3 { 
    position: absolute; 
    left: 0px; 
    min-height: 3em; 
    padding: 15px; 
    right: 0px; 
    top: 0px; 
    z-index: 10; 

    background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0)); 
    color: #fff; 
    font-size: 16px; 
    font-weight: bold; 
    line-height: 1.5em; 
    opacity: 0; 
    transition: all .3s ease-in-out; 
} 

img { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    max-height: 110%; 
    max-width: 110%; 
    opacity: .7; 
    right: 0; 
    top: 0; 
    transform: scale(1.1); 
    transition: all .3s ease-in-out; 
    z-index: 0; 
} 
} 
} 

Answer 1

使用height和pxwidth并设置display:inline-block到.container li

.container { 
 
    border: 1px solid #fff; 
 
} 
 
.container ul { 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.container li { 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    position: relative; 
 
    height:300px; 
 
    width:300px; 
 
    background-color: #000; 
 
    border: 2px solid #fff; 
 
} 
 
.container li:hover h3 { 
 
    opacity: 1; 
 
    transition: all .3s ease-in-out .1s; 
 
} 
 
.container li:hover img { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
} 
 
.container li h3 { 
 
    position: absolute; 
 
    left: 0px; 
 
    min-height: 3em; 
 
    padding: 15px; 
 
    right: 0px; 
 
    top: 0px; 
 
    z-index: 10; 
 
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent); 
 
    color: #fff; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    line-height: 1.5em; 
 
    opacity: 0; 
 
    transition: all .3s ease-in-out; 
 
    margin: 0; 
 
} 
 
.container li img { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    max-height: 110%; 
 
    max-width: 110%; 
 
    opacity: .7; 
 
    right: 0; 
 
    top: 0; 
 
    transform: scale(1.1); 
 
    transition: all .3s ease-in-out; 
 
    z-index: 0; 
 
}

<div class="container"> 
 
    <ul> 
 
    <li> 
 
     <h3>Item Number One</h3> 
 
     <img src="http://lorempixel.com/g/650/650/abstract/7/" /> 
 
    </li> 
 
    <li> 
 
     <h3>Item Number One</h3> 
 
     <img src="http://lorempixel.com/g/650/650/abstract/1/" /> 
 
    </li> 
 
    <li> 
 
     <h3>Item Number One</h3> 
 
     <img src="http://lorempixel.com/g/650/650/abstract/3/" /> 
 
    </li> 
 
    <li> 
 
     <h3>Item Number One</h3> 
 
     <img src="http://lorempixel.com/g/650/650/abstract/5/" /> 
 
    </li> 
 
    <li> 
 
     <h3>Item Number One</h3> 
 
     <img src="http://lorempixel.com/g/650/650/abstract/6/" /> 
 
    </li> 
 
    <li> 
 
     <h3>Item Number One</h3> 
 
     <img src="http://lorempixel.com/g/650/650/abstract/8/" /> 
 
    </li> 
 
    <li> 
 
     <h3>Item Number One</h3> 
 
     <img src="http://lorempixel.com/g/650/650/abstract/9/" /> 
 
    </li> 
 
    <li> 
 
     <h3>Item Number One</h3> 
 
     <img src="http://lorempixel.com/g/650/650/abstract/10/" /> 
 
    </li> 
 
    <li> 
 
     <h3>Item Number One</h3> 
 
     <img src="http://lorempixel.com/g/650/650/fashion/2/" /> 
 
    </li> 
 
    </ul> 
 
</div>