列属性未正确对齐
我正在尝试为我的网站创建三列布局。 当我使用列属性并将其设置为“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;可以将其设置为行内块级别display:inline-block; width: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>You have to use <span> in case of <p> tag, <p> tag by default starts from next line
这是plnk：
http://plnkr.co/edit/n4TlD6nVSqOa9U5F2PON?p=preview
链接地址: http://www.djcxy.com/p/86241.html