html div如何列对其,CSS:自适应N列布局如何解决两端对齐
關于每行N列的這種布局，存在一個兩端對齊的問題，因為每一列都會存在一個margin-left或者margin-right，導致最后一個超出父元素的邊界。
通過一番努力，終于解決了這個遺留很久的問題，廢話不多說，先看做完之后的效果圖
2.PNG
先給出dom結構
頭條推薦視頻娛樂體育高考汽車科技圖片地方軍事社會NBA八卦時尚女性博客數碼教育星座游戲家具健康一、解決思路
1.PNG
1.假定每行4列，則每一列寬度應該為25%，包括border和margin-right，此時4列加起來的寬度應該正好是100%，即父元素的寬度
2.按照第一步的邏輯，每一行最后一列的margin-right會使每一行的右側和父元素并不是對齊的，看下圖。我們暫時不管這個問題，后面會解決。
3.PNG
3.每一列包括自己本身div.item和margin-right，設本身寬度為23%，margin-right為2%，這樣加起來剛好25%。
注意：div.item自身有border,會影響百分比計算，將它的box-sizing設置為border-box,會將border的寬度計算在23%的width里面，這樣就可以消除影像
4.最后解決第2步中存在的問題，通過給div.item的父元素div.main 設置margin-right:-2%,就可以解決這個問題了。
二、完整CSS代碼
.container{
margin:50px 10px;
border-top:1px solid #000;
overflow: hidden;
}
.main{
margin-top:10px;
margin-right:-2%;
}
.item{
width:23%;
height:30px;
line-height: 30px;
text-align: center;
margin-right:2%;
box-sizing:border-box;
float:left;
border:1px solid #cbd1d0;
margin-bottom:10px;
}
最后，大家如果還有其他的解決辦法或者思路，歡迎指導。如果文章有問題，也可以在評論中指出來，么么~~~
總結
以上是生活随笔為你收集整理的html div如何列对其,CSS:自适应N列布局如何解决两端对齐的全部內容，希望文章能夠幫你解決所遇到的問題。
