css 多行二端对齐解决方案

一、前言

对于前端,多行二端对齐是个常见的需求,也非常简单,但多加几个限制条件就比较有意思
了。一个是完美的二端对齐(上端有个border做参照)、二个兼容ie9、三是有margin。

二、对于第一个,不考虑ie,有margin,自然是flex,示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行二端对齐</title>
    <style>
         .main1 {
            width: 50%;
            margin: 0 auto;
            margin-top: 100px;
            border-top: 1px solid black;
            overflow: hidden;
        }
        .container1 {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin-top: 20px;
            margin-right: -3%;
        }
        .item1 {
            /*box-sizing: border-box;*/
            flex: 0 0 22%;
            display: inline-block;
            margin-top: 1%;
            margin-right: 3%;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="main1">
    <div class="container1">
        <div class="item1"></div>
        <div class="item1"></div>
        <div class="item1"></div>
        <div class="item1"></div>
        <div class="item1"></div>
        <div class="item1"></div>
        <div class="item1"></div>
    </div>
</div>
</body>
</html>

注意事项:单行有右边距可以直接用justity-content:space-between。但如果itme1超过一行并且数量不定,在最后一行出现item1不满一行的情况就不能用了。
关键代码:.container1 { margin-right: -3%; },利用margin百分比相对于父元素的特性。

二、考虑ie,有margin,示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二端对齐</title>
    <style>
        .item {
            display: inline-block;
            width: 22%;
            height: 100px;
            background-color: pink;
            margin: 0 3% 1% 0;
        }
        .main {
            width: 50%;
            margin: 0 auto;
            margin-top: 100px;
            border-top: 1px solid black;
            overflow: hidden;
        }
        .container {
            font-size: 0;
            margin-top: 20px;
            margin-right: -3%;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="container">
        <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>
</html>

此方法和第一种flex没有本质的区别,但是具有兼容性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,604评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,507评论 0 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,788评论 0 2
  • 生肖牛 属牛的人从小到大都是贵气围身,天生就是做大事的,他们为人相当好。遇上这样的人就是你的贵人,届时财星降临,无...
    黄小鞋a阅读 385评论 0 0