CSS3 使用:before和:after 伪类将div制作ta

作者: 圆梦人生 | 来源:发表于2016-10-19 18:45 被阅读100次

CSS3 使用:before和:after 伪类将div制作ta
常用的清除浮动方法
梳理常用伪类和伪元素
伪类
如何用css制作一个太极图案
::before 和 :after中双冒号和单冒号有什么区别？
CSS的伪元素和伪类
CSS :before、:after伪元素 content属性
清除浮动
css伪类和伪元素（单冒号:和双冒号::的使用）

使用:before和:after 将div制作table一行四列效果,缺点是不能超过一行四列。

案例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>CSS3 使用:before和:after 将div制作table一行四列效果</title>

<style type="text/css">
    .box {
        width: 98%;
        margin: 0 auto;
    }
    .ui-box {
        display: -webkit-box;
        display: box;
        overflow: hidden;
        position: relative;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-top: 1px solid #ddd8ce;
        border-left: 1px solid #ddd8ce;
        border-right: 1px solid #ddd8ce;
    }
    .ui-box > div {
        -webkit-box-flex: 1;
        box-flex: 1;
    }

    .table:last-child {
        border-bottom: 1px solid #ddd8ce;
    }

    /*
        最多一行四列实现效果
    */
    .table:before {
      content: '';
      position: absolute;
      width: 25%;
      left: 25%;
      height: 100%;
      border-left: 1px solid #ddd8ce;
      border-right: 1px solid #ddd8ce;
    }
    
    .table:after {
      content: '';
      position: absolute;
      width: 10%;
      left: 75%;
      height: 100%;
      border-left: 1px solid #ddd8ce;
      border-right: none;
    }
</style>
</head>

<body>
    <br/>
    <div class="box">
        <div class="ui-box table">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
        <div class="ui-box table">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
        <div class="ui-box table">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
        <div class="ui-box table">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
    </div>
</body>
</html>

效果：