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列。

当broswer窗口很大时： http://oi60.tinypic.com/15wgz1x.jpg

当我将浏览器调整为较小时： http://oi60.tinypic.com/2n8as1c.jpg

Answer 1

Chage <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;
}

如何使用display缩放图像：调整浏览器大小时的内联块？

1 个答案: