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

我很难解决如何完成这个父div是完整width:100%与具体height:500px然后我想孩子DIV具有特定的宽度和高度让我们只是说width:980px;height = the height of parent DIV那么该父母DIV将分为3列。如何做到这一点？父DIV是全宽，而子div是特定宽度

样本图像：

sample

GREEN：父DIV与全宽。

BLUE：儿童DIV分为3 columns

预先感谢您！

来源

2014-03-27 Unknownymous

你能告诉我们，你到现在为止尝试过什么吗？ –

'margin：0px auto;'在一个额外的'div'包装这3个内部div。它将不可见，只能用作占位符。 – 2014-03-27 06:15:28

看看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代替

来源

2014-03-27 06:18:50 Incognito

+1，但为什么滥用'table'-styleing呢？除了样式表之外，您只会欺骗自己阅读的HTML。你可能只是做一行“桌子”。那么你至少可以确定你所看到的HTML就像你声明的元素一样;） – 2014-03-27 06:23:11

@Kuma谢谢先生！无论如何，我读了**显示：表格单元**是不是像IE8跨浏览器兼容？ – Unknownymous

@Unknownymous只要删除'table-cell'和'table'样式，并给予grand-children自定义宽度并使用'display：inline-block;'或'float's，就完成了。 – 2014-03-27 06:24:48

我花了太长时间来回答我猜这是这里的另一个的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; 
}

干杯！

来源

2014-03-27 06:47:32 Diego

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

回答

相关问题