css - 在 html5 css3 中创建类似页脚的多列

Question

我需要创建一个包含三列的页脚。下面的代码给出了第二张图片而不是第一张；

<footer>
    <div id=”footer_links”> </div>
    <div id=”values”>.....</div>
    <div id=”contacts”>.....</div>
    <div id="copyright">.....</div>
</footer>

CSS 代码:

footer{
 height: auto;
 padding:1px 15px 1px 20px;
 clear:both;
 }
#footer_links{
float:left;
}
#values{
 float:none;
 padding:0 600px 0 0;
 text-align:justify;
 }
#contacts{
float: right;

}

#copyright{
float:none;
text-align:center;
}

如何让我的 div 正确排列而不是像第二个示例那样偏移？

Answer 1

您可以使用 CSS3 Multicolumns .

div#multicolumns {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

查看预览和文档链接。