关于使用栅格系统加图片定位展示商品

栅格+定位使图片高于文档流

用来展示图片不规则的定位，仅供参考！（row和col-4是参考bootstrap栅格系统做的）

html：

<div class="ui container">
        <div class="row r1">
            <div class="col-4 col-md-4 c1">
                <div class="pt">
                    <img src="images/图层 2.png" alt="">
                </div>
            </div>
            <div class="col-4 col-md-4 c2"></div>
        </div>
        <div class="row">
            <div class="col-4 col-md-4 c2"></div>
            <div class="col-4 col-md-4 c1">
                <div class="pt">
                    <img src="images/图层 2.png" alt="">
                </div>
            </div>
        </div>
    </div>

　　

css

body {
            background-color: #e6e9eb;
        }

        .ui {
            margin-top: 100px;
        }

        .row {
            height: 400px;
            margin-top: 1px;
            margin-bottom: 140px;
            background-color: #FFF;
        }

        .c1 {
            position: relative;
            height: 20vw;
        }

        .c2 {
            height: 20vw;
            background-color: blue;
        }

        .pt {
            position: absolute;
            left: 0;
            bottom: 30px;
            padding-left: 20px;
            padding-bottom: 20px;
            height: 100%;
            width: 90%;

        }

　　

 

二：栅格布局，左侧图片，右侧li列表，鼠标悬停宽度增加，颜色改变，伸缩

html代码

<div class="row">
        <div class="col-5">
            <div class="ig">
                <img src="images/图层 22.png" alt="">
            </div>
        </div>
        <div class="col-3">
            <ul>
                <li>第一个实例</li>
                <li><a href="">第二个实例</a></li>
                <li>第三个实例</li>
            </ul>
        </div>
    </div>

　　css代码

ul li {
            float: right;
            width: 35vw;
            height: 10vw;
            line-height: 10vw;
            text-align: center;
            border: 2px solid #000;
            background-color: darkblue;
            vertical-align: middle;
        }
        .ig {
            text-align: right;
        }
        ul li a {
            display: inline-block;
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
        ul li:hover {
            width: 40vw;
            background-color: #fff;
        }

　　

 

效果图：

栅格分两列，左列图片，右列文字描述