关于每行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列布局如何解决两端对齐相关推荐

  1. div+css如何让一行内的文字两端对齐？

    css如何让一行内的文字两端对齐? text-align:justify;. text-justify语法:text-justify : auto |inter-word | newspaper | ...

  2. css浮动布局自适应,CSS | 自适应两栏布局方法

    html代码: 固定宽度 自适应区域 1.浮动+margin 第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度. .le ...

  3. Layout两列定宽中间自适应三列布局

    最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧 html: <div class="container ...

  4. html设置div靠左,float:left css浮动靠左 布局靠左

    首先float是组织网页浮动(对象靠左left.靠右right)样式属性单词.在构造中咱们要让对象靠左显现只要求对对象设置float:left款式即可. 一.float left语法 1.float: ...

  5. CSS用flex布局两端对齐，列不满左对齐

    布局上要求两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between; 实现时发现最后一行不能左对齐,而是两端对齐方式. # 网上查了一 ...

  6. html两个盒子怎么左右对其,多个div两端对齐

    如何使div里的两个div两端对齐 设置所在层的padding和margin属性就好了如下 div { padding:10px; } div img { margin-right:10px; mar ...

  7. 两端分散对齐怎么设置_如何用css实现一段文字的两端对齐和分散对齐

    展开全部 用css实现一段32313133353236313431303231363533e78988e69d8331333433646435文字的两端对齐的代码输入步骤如下: 1.首先输入代码让这段 ...

  8. css两端对齐(CSS两端对齐在苹果手机中不起作用)

    css里面怎样让两行文字两端对齐 .ie { text-align: justify; text-align-last: justify; text-justify: inter-ideograph; ...

  9. html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局

    制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...

最新文章

  1. C语言Free时报错HEAP CORRUPTION DETECTED
  2. 饱和气压与温度的关系_凯米斯小课堂 | 溶解氧与水产养殖的关系
  3. C 中的内存操作函数-memcpy 等（to be continued）
  4. Octave中无法使用rgb2gray()函数
  5. LeetCode 88. 合并两个有序数组(Merge Sorted Array)
  6. 《MANAGING THE DEVELOPMENT OF LARGE SOFTWARE SYSTEMS》总结
  7. timthumb.php外链,如何解决WordPress多站点不支持timthumb.php？
  8. 【转】VTK修炼之道2_VTK体系结构1
  9. 服务器存储满了进不去系统,解决PC常见问题 篇四十五：建议收藏！手贱升级进不去系统？两步简单恢复黑群晖！...
  10. 15. jQuery - 删除元素
  11. selenium 谷歌驱动 下载网址
  12. python百度地图api添加坐标点_python调用百度地图API实现经纬度换算、热力地图全流程指南...
  13. 现有一循环队列，其队头指针为front，队尾指针为rear；循环队列长度为N。其队内有效长度为？
  14. 谈谈数独(Sudoku)
  15. PHP将一个二维数组按照某个键的键值做出重组一个新的二维数组
  16. 修改Mysql密码(简单粗暴)
  17. 用php照片艺术化,Photoshop把人像照片转化为艺术格子效果图
  18. 关于同一ip有的电脑不能上网有的可以上网的解决方法
  19. 谨慎：使用 iptables -F 清除所有规则命令时必须小心
  20. 以下是某品牌计算机的硬件配置广告,第二章认识计算机习题(1).doc

热门文章

  1. flowable实战（十一）flowable 删除数据库表先后顺序
  2. C/C++ atoi函数 - C语言零基础入门教程
  3. 中国大学慕课python答案第七章_中国大学慕课用Python玩转数据章节测试答案
  4. ld 指令c语言实现,C语言符号、指令表.doc
  5. 机器视觉技术及应用_工业机器人视觉技术的应用前景
  6. 基于文本 c语言,[源码和文档分享]基于C语言实现的文件系统
  7. 有十五个数按由大到小顺序存放在一个数组中_数据结构基础 (代码效率优化, 线性表, 栈, 队列, 数组，字符串，树和二叉树，哈希表)...
  8. fpgrowth算法实战 mlib_【spark】41.Spark Mlib：FPGrowth算法
  9. oracle立即关闭数据库,Oracle数据库的起步和关闭
  10. docker 容器端口访问不到_docker容器无法访问宿主机端口的解决