我正在尝试为我的网站创建一个三列布局.当我使用column属性并将其设置为“3”列时,它没有正确对齐.之前的每一列似乎都被推下了一点点.有没有办法纠正这个?当我将列数设置为“5”列并最小化窗口时,它会做同样的事情
.widget-column { columns: 5em 3; /* Test with 5 columns */ -moz-columns: 5em 3; /* Test with 5 columns */ -webkit-columns: 5em 3; /* Test with 5 columns */ } .widget-column p { padding: 1em; }
<div class="widget-column"> <p>Column</p> <p>Column</p> <p>Column</p> <p>Column</p> <p>Column</p> </div>
解决方法
由于< p>是块级元素,它在元素之前和之后添加换行符.但是,您可以通过设置display:inline-block将其设置为内联块级别;加宽度:100%;用于扩大宽度.
* { margin: 0; padding: 0; } .widget-column { margin: 10px; text-align: center; columns: 5em 3; -o-columns: 5em 3; -ms-columns: 5em 3; -moz-columns: 5em 3; -webkit-columns: 5em 3; column-gap: 0px; -o-column-gap: 0px; -ms-column-gap: 0px; -moz-column-gap: 0px; -webkit-column-gap: 0px; } .widget-column p { background: #EEE; padding: 1em; display: inline-block; width: 100%; }
<div class="widget-column"> <p>Column</p> <p>Column</p> <p>Column</p> <p>Column</p> <p>Column</p> </div>
原文地址:https://www.jb51.cc/html/225493.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。