html - 如何使用显示 : inline-block when resizing browser? 缩放图像

Question

<div class="pagework">
<h1>WORK</h1>
<div class="pageworkgallery">

<ul>
<li><img src="FRONT OPERAH crop.png" width="500" height="400" /></li>
<li><img src="anedo front crop.png" width="500" height="400" /></li>
<li><img src="3 front tilt crop.png" width="500" height="400" /></li>
<li><img src="gfx logo insitu.png" width="500" height="400" /></li>
<li><img src="student excellence awards crop.jpg" width="500" height="400" /></li>
<li><img src="bodegas wine poster mockup crop.png" width="500" height="400" /></li>
</ul>

</div>
</div>

CSS

h1{
font-family: 'rex_bold_bold'; 
font-size: 40px; 
margin-top: 60px; 
letter-spacing: 15px
} 
.pagework{
height: 1500px; 
background-color:#FFF; 
margin: 0 auto
}
.pageworkgallery{
height:1500px; 
margin: 70px 70px 70px 70px; 
max-width:100%
}
.pageworkgallery ul{
list-style:none
}
.pageworkgallery ul li{
display:inline-block; 
padding: 4px
}

当我将浏览器的大小调整得更小时，图像会一个接一个地进入 1 列，而不是停留在 2 列。我希望它保持在 2 列。

当浏览器窗口很大时: http://oi60.tinypic.com/15wgz1x.jpg

当我缩小浏览器时: http://oi60.tinypic.com/2n8as1c.jpg

Answer 1

查<li>对此的结构

<li><div class="wrapper"><img src="FRONT OPERAH crop.png" width="500" height="400" /></div></li>

& 对此的CSS

.pageworkgallery ul{
    list-style:none
}

.pageworkgallery ul li{
    display:inline-block;
    width:50%;
    float:left;
}

.pageworkgallery ul li .wrapper{
    display:block;
    padding:4px;
    text-align:center;
}

.pageworkgallery ul li img{
    display:inline-block;
    width:100%;
    height:100%;
    max-width:500px;
}