html：

    <div class="container">
        <div class="childDiv"></div>
        <div class="childDiv"></div>
        <div class="childDiv"></div>
    </div>

css:
法一：浮动布局+百分比

        .container{
            overflow: hidden;
            zoom:1;
            width:500px;
            height:200px;
            border:1px solid red;
        }
        .childDiv{
            float:left;
            width:33.3%;
            height:100%;
            border:1px solid red;
            background:greenyellow;
        }

法二：行内元素+百分比

        .container{
            font-size: 0;
            overflow: hidden;
            width:500px;
            height:200px;
            border:1px solid lightblue;
        }
        .childDiv{
            display: inline-block;
            width: 33.3%;
            height:100%;
            border:1px solid gray;
        }

法三：父元素 display:table + 子元素 display:table-cell

        .container{
            width:500px;
            height:200px;
            display: table;
            border:1px solid lightblue;
        }
        .childDiv{
            display: table-cell;
            border:1px solid gray;
        }

法四：css3 display:flex

        .container{
            width:500px;
            height:200px;
            display: flex;
            border:1px solid lightblue;
        }
        .childDiv{
            flex:1;
            border:1px solid gray;
        }