我正在尝试为我的网站创建一个三列布局.当我使用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>
