CSS:自适应N列布局如何解决两端对齐

关于每行N列的这种布局,存在一个两端对齐的问题,因为每一列都会存在一个margin-left或者margin-right,导致最后一个超出父元素的边界。
通过一番努力,终于解决了这个遗留很久的问题,废话不多说,先看做完之后的效果图

2.PNG

先给出dom结构

<body>
    <div class="container">
        <div class="main">
            <div class="item">头条</div>  
            <div class="item">推荐</div> 
            <div class="item">视频</div> 
            <div class="item">娱乐</div>  
            <div class="item">体育</div>
            <div class="item">高考</div>
            <div class="item">汽车</div>
            <div class="item">科技</div>
            <div class="item">图片</div>
            <div class="item">地方</div>
            <div class="item">军事</div>
            <div class="item">社会</div>
            <div class="item">NBA</div>
            <div class="item">八卦</div>
            <div class="item">时尚</div>
            <div class="item">女性</div>
            <div class="item">博客</div>
            <div class="item">数码</div>
            <div class="item">教育</div>
            <div class="item">星座</div> 
            <div class="item">游戏</div> 
            <div class="item">家具</div> 
            <div class="item">健康</div> 
        </div>
    </div>
</body>

一、解决思路

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代码

<style type="text/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;
    }
</style>

最后,大家如果还有其他的解决办法或者思路,欢迎指导。如果文章有问题,也可以在评论中指出来,么么~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 1标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? CSS盒子模型:由四个属性组成的外边距(margi...
    秦小婕阅读 1,156评论 0 1
  • CSS 1、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种,IE盒子模型、W3C...
    京程一灯阅读 1,742评论 3 26
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,727评论 0 2
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 923评论 0 1