html – 列属性未正确对齐

发布时间：2020-12-14 18:41:39 所属栏目：资源来源：网络整理

导读：我正在尝试为我的网站创建一个三列布局.当我使用column属性并将其设置为“3”列时,它没有正确对齐.之前的每一列似乎都被推下了一点点.有没有办法纠正这个？当我将列数设置为“5”列并最小化窗口时,它会做同样的事情 .widget-column { columns: 5em 3; /* Tes

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

JSFiddle

解决方法

由于< 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!