第一种简单的实现方法是通过 css3 flex属性
假设三列布局，html中写入代码如下：
<body>
<div>
<ul>
<li id="item"><a href=""><img src="img/1.jpg" alt=""></a></li>
<li id="item"><a href=""><img src="img/3.jpg" alt=""></a></li>
<li id="item"><a href=""><img src="img/4.jpg" alt=""></a></li>
</ul>
<ul>
<li id="item"><a href=""><img src="img/2.jpg" alt=""></a></li>
<li id="item"><a href=""><img src="img/5.jpg" alt=""></a></li>
<li id="item"><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul>
<li id="item"><a href=""><img src="img/7.jpg" alt=""></a></li>
<li id="item"><a href=""><img src="img/8.jpg" alt=""></a></li>
</ul>
</div>
</body>css代码如下：
<span style="white-space:pre"> </span>div{width: 100%;display: flex;flex-direction:row;justify-content: space-around;}
ul{display: flex;list-style-type: none;flex-direction: column;}
#item{align-self: flex-start;}
#item a{display: block;text-align: center;}
img{max-width: 300px;height: auto;}flex布局简单灵活，目前新版本的浏览器都能支持。
另外一种比较简单的方式，是通过css3的column-width或者column-count进行布局，这里以column-width为例，css样式代码如下：
<span style="white-space:pre"> </span>div{column-width:400px;
<span style="white-space:pre"> </span>-moz-column-width:400px; /* Firefox */
-webkit-column-width:400px; /* Safari 和 Chrome */
-o-column-width:}
ul{list-style-type: none;}
#item a{display: block;text-align: center;}
img{max-width: 300px;height: auto;}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
