html – 列属性未正确对齐

概述我正在尝试为我的网站创建一个三列布局.当我使用column属性并将其设置为“3”列时,它没有正确对齐.之前的每一列似乎都被推下了一点点.有没有办法纠正这个？当我将列数设置为“5”列并最小化窗口时,它会做同样的事情 .widget-column { columns: 5em 3; /* Test with 5 columns */ -moz-columns: 5em 3; /* Te 我正在尝试为我的网站创建一个三列布局.当我使用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 >  <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 >  <p>Column</p>  <p>Column</p>  <p>Column</p>  <p>Column</p>  <p>Column</p></div>

总结

以上是内存溢出为你收集整理的html – 列属性未正确对齐全部内容，希望文章能够帮你解决html – 列属性未正确对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。