• 布局(3):图片列表布局


    我真的菜啊,很少写布局这方面的,最近写公司的官网真的觉得自己好弱啊,不过同时也学习了大量的知识,学过不总结,跟咸鱼有啥区别!

    两种常用的切图方案:

    1,float布局

    2,display:inline-block布局。

    例如这3行3列的图片列表为例子介绍两种常用的切图方案:

    一,float布局

    html结构:

    <ul>
            <li><img src="./images/1.jpg"></li>
            <li><img src="./images/2.jpg"></li>
            <li><img src="./images/3.jpg"></li>
            <li><img src="./images/4.jpg"></li>
            <li><img src="./images/5.jpg"></li>
            <li><img src="./images/6.jpg"></li>
            <li><img src="./images/7.jpg"></li>
            <li><img src="./images/8.jpg"></li>
            <li><img src="./images/9.jpg"></li>
        </ul>

     然后给每个li元素定一个宽度并向左浮动。这里每行要显示3张图片,那么每张图片的宽度可以使用百分比来计算:100/3=33.3%。

    li {
        list-style: none;
        float: left;
        width: 33.3%;/*三列图片排列*/
    }

    每个img标签的宽度设为100%,占满整个li的宽度,为了防止图片变形,高度自适应

    li {
        list-style: none;
        float: left;
        width: 33.3%;/*三列图片排列*/
    }
    
    li img {
        width: 100%;
    }

     好了,咱们来看看效果。

    怎么和我们想的不一样?这时候列表是混乱的。别急,这是因为图片的尺寸不一。如果项目中图片的尺寸差别太大的话,建议在父元素定死一个高度,并设置超出隐藏。但是如果图片尺寸差别不大的话,建议设置height: auto;以达到高度自适应的目的

    li {
        list-style: none;
        float: left;
        width: 33.3%;/*三列图片排列*/
        height: 100px;/*当图片尺寸不一的时候,设置一个高度*/
        overflow: hidden;/*超出隐藏*/
    }

    这时候产品可能会要求你图片要上下居中

    li img {
        position: relative;
        width: 100%;
        top: 50%;/*li高度的一半*/
        transform: translateY(-50%); /*再向上移动自身的50%*/
    }

    有的同学可能会想到用margin-top,而不是top。这里需要注意一下,margin-top和margin-bottom的百分比,一般是按容器元素的宽度而不是高度来计算的,padding同理

    到这里,一个基本的三行三列图片布局基本就完成了。

    但是注意了,新手可能会忽略掉的一个隐藏问题:子元素浮动之后父容器坍塌了,有时候这种特性会严重影响到我们的布局。

    给ul加上清除浮动的类 clearfix:

    .clearfix:after{
        position: relative;
        content: '';
        display: block;
        width: 0;
        height: 0;
        visibility: hidden;
        clear: both;
    }

     二,display:inline-block布局

    同float布局差不多,只是我们要把float,替换成display:inline-block;

    li {
        list-style: none;
        display: inline-block;
        width: 33.3%;
        /*三列图片排列*/
        height: 100px;
        /*当图片尺寸不一的时候,需要设置一个最大高度*/
        text-align: center;
        /*内容居中*/
        overflow: hidden;
        /*超出隐藏*/
    }

    来看一下效果,出现了间隙,而且被挤成两行了。怎么回事?~

    这里使用font-size: 0;方法清除元素间的间隙

    ul {
        width: 100%;
        margin: 0 auto;
        font-size: 0;
    }

     原博地址:div+css图片列表布局(一)

  • 相关阅读:
    Django 常用过滤器
    计算机概论(2)
    计算机概论(1)
    Django URL视图
    模板标签之if、for
    Django 渲染模板、路径配置、变量使用。

    字符串用法
    hashlib模块
    小列
  • 原文地址:https://www.cnblogs.com/qianxunpu/p/9329990.html
Copyright © 2020-2023  润新知