Question

我正在尝试为我的网站创建一个三列布局。当我使用column属性并将其设置为＆＃34; 3＆＃34;列，它没有正确对齐。之前的每一列似乎都被推下了一点点。有没有办法纠正这个？当我将列数设置为＆＃34; 5＆＃34;时，它会做同样的事情。列并最小化窗口

＆＃13;

.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;
}

＆＃13;

<div class="widget-column">
  <p>Column</p>
  <p>Column</p>
  <p>Column</p>
  <p>Column</p>
  <p>Column</p>
</div>

＆＃13;

JSFiddle

Answer 1

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

Answer 2

由于<p>是块级元素，因此它在元素之前和之后添加换行符。但是，您可以将其设置为内联块级别，方法是设置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>

列属性未正确对齐

2 个答案: