图片多行多列显示（矩阵显示）

最新推荐文章于 2021-06-08 10:57:52 发布

weixin_30585437

最新推荐文章于 2021-06-08 10:57:52 发布

阅读量517

点赞数

文章标签：人工智能 c# javascript ViewUI

原文链接：http://www.cnblogs.com/liyunchuan/p/11546526.html

版权

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<html>
<head>
    <meta charset="utf-8">
</head>
<!--注意body中style里面的 width值  不然过大两列会显示在一行，必须相等或者相差合适，把握住度-->
<body style="width: 1200px;height: 1000px;background-color: green">
<!--主体div-->
    <div>
        <!--无序列表：第一行-->
        <ul>
            <li>
                <!--第一列-->
                <div style="width: 500px;height:333px;float:left" >

                    <a href="./index.html">
                        <img src="C:/Users/MrLi/Desktop/水印.jpg" style="width: 500px;height: 333px">
                    </a>
                </div>
                <!--第二列-->
                <div style="width: 500px;height:333px;float:left" >

                    <a href="./index.html">
                        <img src="C:/Users/MrLi/Desktop/配图.jpg">
                    </a>
                </div>

            </li>
            <!--无序列表：第二行-->
            <li>
                <div style="width: 500px;height:333px;float:left" >

                    <a href="./index.html">
                        <img src="C:/Users/MrLi/Desktop/配图.jpg">
                    </a>
                </div>
                <div style="width: 500px;height:333px;float:left" >

                    <a href="./index.html">
                        <img src="C:/Users/MrLi/Desktop/水印.jpg" style="width: 500px;height: 333px">
                    </a>
                </div>
            </li>

        </ul>

        </div>

    </div>
</body>
</html>