我怎么能改变这张照片？我希望创建html站点地图

Question

我无法做到。 请帮帮我！

before -> after

我怎么能改变这张照片？我希望创建html站点地图

这是我的代码

<div class="sitemapcontainer">
<h1>Sitemap</h1>

<ul>
<li clas



<style>
.sitemapcontainer {max-width:1200px; width:100%; max-height:430px; height:100%;}
.sitemapcontainer ul {list-style-type:none;display:block;max-width:151px;width:100%;}
.lili {float:left; font-size:14px; border-bottom:1px solid #E7E7E7;width:100%; text-align:center; background-color:#F1F1F1;max-width:151px;width:100%;}
.lititle {text-align:center; background-color:#05508b;color:#ffffff;border-right:1px ;solid #ffffff;max-width:151px;width:100%;}
.lititle a {color:#ffffff;}
.litltle a:hover {text-decoration:none; color:#be1c21;}
</style>

Answer 1

只需添加以下css：

.sitemapcontainer ul {
   float:left;
}

DEMO

如果您想自动调整，请使用此插件http://masonry.desandro.com/v2/。

Answer 2

最简单的解决方案是使用CSS3列。它适用于大多数浏览器，包括IE 10 +。

.sitemapcontainer{
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}

对于旧版浏览器，您可以使用polyfill，例如： https://github.com/hamsterbacke23/multicolumn-polyfill