需求
一个div中图片的尺寸根据后台返回的个数决定,要求:
- 一张图片一行显示尺寸690px;
- 2张图片一行显示尺寸320px,4张图片两行显示,每行2张各占320px。
- 大于3张图片,每行3张排列,每张图片各占200px。
实现效果
一张图片
2张图片
3张图片
4张图片
9张图片
实现
<div>
<!-- 可逐个放开注释查看显示效果 -->
<img src="https:\/\/images.dog.ceo\/breeds\/waterdog-spanish\/20180723_185544.jpg" alt="">
<img src="https:\/\/images.dog.ceo\/breeds\/waterdog-spanish\/20180723_185544.jpg" alt="">
<!-- <img src="https:\/\/images.dog.ceo\/breeds\/waterdog-spanish\/20180723_185544.jpg" alt="">
<img src="https:\/\/images.dog.ceo\/breeds\/waterdog-spanish\/20180723_185544.jpg" alt="">
<img src="https:\/\/images.dog.ceo\/breeds\/waterdog-spanish\/20180723_185544.jpg" alt="">
<img src="https:\/\/images.dog.ceo\/breeds\/waterdog-spanish\/20180723_185544.jpg" alt="">
<img src="https:\/\/images.dog.ceo\/breeds\/waterdog-spanish\/20180723_185544.jpg" alt="">
<img src="https:\/\/images.dog.ceo\/breeds\/waterdog-spanish\/20180723_185544.jpg" alt="">
<img src="https:\/\/images.dog.ceo\/breeds\/waterdog-spanish\/20180723_185544.jpg" alt=""> -->
</div>
</div>
css样式
div {
width: 750px;
border: 2px solid gray;
}
/* 默认3张以上的样式(不包括4张) */
div img {
width: 200px;
border: 2px solid red;
}
/* 当只有一张图片的样式 */
div img:only-child {
width: 690px;
border: 2px solid red;
}
/* 既是倒数第二张又是第一张说明有两张图片 */
div img:nth-last-child(2):first-child,
/* ~表示同属于父类的所有img兄弟元素 */
img:nth-last-child(2):first-child~img {
width: 320px;
border: 2px solid red;
}
/* 表示有四张图片 */
div img:nth-last-child(4):first-child,
img:nth-last-child(4):first-child~img {
width: 320px;
border: 2px solid red;
}