父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是特定寬度

回答

相關問題