如何实现这种三列布局?_Html5_论坛

如何实现这种三列布局?

ch***am 分类：Html5 人气：1633 回帖：12 发布于6年前收藏

要求结构是

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>   
    ...
</ul>

顺序如图所示

更新我希望每个图片之间横隔的距离是相等的,图片4个箭头处的宽度是相等的
如图

标签：css html5

讨论这个帖子（12）垃圾回帖将一律封号处理……

Lv1 新人

多***悟学生 6年前#1

用box-sizing: border-box
跟padding
然后width设置为33.33%
这个是最简单的方法

Lv3 码奴

li***09 软件测试工程师 6年前#2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>demo</title>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            ul {
                list-style: none;
                width: 380px;
                height: 500px;
                margin: 100px auto;
                background: red;
            }
            ul li {
                float: left;
                margin: 20px 0 0 20px;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <img src="./images/c1.jpg" width="100" height="100">
            </li>        
            <li>
                <img src="./images/c1.jpg" width="100" height="100">
            </li>                
            <li>
                <img src="./images/c1.jpg" width="100" height="100">
            </li>            
            <li>
                <img src="./images/c1.jpg" width="100" height="100">
            </li>            
            <li>
                <img src="./images/c1.jpg" width="100" height="100">
            </li>            
            <li>
                <img src="./images/c1.jpg" width="100" height="100">
            </li>            
            <li>
                <img src="./images/c1.jpg" width="100" height="100">
            </li>            
            <li>
                <img src="./images/c1.jpg" width="100" height="100">
            </li>
        </ul>
    </body>
</html>

图上效果demo,如果想看三列等高布局的话,可以看一下我写的博客：http://blog.csdn.net/zp1996323/article/details/49558015

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取