JavaScript之根据所选排列方式进行排列

最新推荐文章于 2023-01-11 20:59:12 发布

知识进脑的肖老千啊

最新推荐文章于 2023-01-11 20:59:12 发布

阅读量165

点赞数 1

分类专栏： HTML JS 文章标签： html javascript

本文链接：https://blog.csdn.net/m0_50481455/article/details/116207845

版权

JavaScript之根据所选排列方式进行排列

有两种方式，第一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格布局</title>
    <style type="text/css">
        *{
    
            padding: 0;
            margin: 0;
        }
        #wrap{
    
            overflow: hidden;
        }
        #wrap .item{
    
            width: 248px;
            height: 434px;
            font-size: 13px;
            border: 1px solid gray;
        }
        #wrap .item .title{
    
            width: 248px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .imgContainer{
    
            width: 248px;
            display: table-cell;
            text-align: center;
        }
        .imgContainer img{
    
            width: 248px;
            height: 360px;
        }
        #wrap .item .price{
    
            color: #ff6700;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="cols">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>
    </div>
    <div id="wrap">
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt1.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt2.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt3.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt4.jpg" alt="">
            </div>
            <p class

最低0.47元/天解锁文章

知识进脑的肖老千啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
JavaScript之根据所选排列方式进行排列

JavaScript之根据所选排列方式进行排列有两种方式，第一种：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>九宫格布局</title> <style type="text/css"> *{ padding: 0; margin: 0;
复制链接

扫一扫