父DIV是全宽，而子div是特定宽度

Question

我很难解决如何完成此父级div已满width:100%且具有特定height:500px然后我希望具有特定宽度和高度的子DIV让＆ ＃39;只需说出width:980px;height = the height of parent DIV，然后将该父DIV划分为 3列。怎么做到这一点？

示例图片：

绿色：父级DIV，全宽。

蓝色：儿童DIV分为3 columns

提前谢谢！

Answer 1

看看this。

<div id="parent">
    <div id="child">
        <div class="grandchildren">
        </div>
        <div class="grandchildren">
        </div>
        <div class="grandchildren">
        </div>
    </div>
</div>

式

div#parent {
    width: 100%;
    height: 200px;
    background-color: green;
}

div#child {
    height: 200px;
    width: 300px;
    background-color: blue;    
    margin: 0 auto;
    display: table;
}

div.grandchildren {
     border: 1px solid yellow;
     display: table-cell;
}

编辑：sample但未使用table个样式但使用float代替

Answer 2

我花了太长时间才回答我猜:)这是另一个jsfiddle，这个响应：

http://jsfiddle.net/LmHjU/2/

<div class="green_block">
    <ul class="blue_block">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

和css：

.green_block{
    background: #22B14C;
    width: 100%
}

ul.blue_block{
    background: #00A2E8;
    border: 3px solid #4DBDF3;
    height: 500px;
    list-style: none;
    margin: 5px auto;
    padding: 0;
    width: 80%; /* or whatever width you need */

    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}

ul.blue_block li{
    border-right: 3px solid #5E8899;
    float: left;
    height: 100%;
    width: 30%;
}

ul.blue_block li:last-child{
    border-right: none;
}

干杯！