調整網頁中的分區

我正在嘗試使用HTML5，CSS3構建網頁。我有四個列表，我已經分成4個不同的分區。另一個分區#position_calls是上述所有分區的父級。調整網頁中的分區

我希望將這四個列表安排在2 * 2陣列形式中，其中每個框應具有相同的高度。我曾嘗試使用「float」關鍵字來做這件事，但那並沒有奏效。

#tech_calls{ 
    float:left; 
    border:2px solid green; 
    width:49%; 
    height:50%; 
    margin:auto; 
} 
#quantech_calls{ 
    float:right; 
    border:2px solid green; 
    width:49%; 

}

我不使用「位置」關鍵字，因爲這可能會妨礙響應式頁面。

另外，我不明白爲什麼div #position_call的父紅色邊框沒有覆蓋整個區域（包括它的子div）。但從所有的子div中刪除浮動屬性，它工作正常。 JSFIDDLE. 那麼浮動與此有什麼關係？

任何幫助，將不勝感激。

我熟悉Javascript如果有幫助，謝謝！

來源

2016-03-22 Raghav Motwani

父容器應該有一個'overflow：hidden'，它應該可以很好的渲染。 https://jsfiddle.net/ImAtWar/18yway8m/3/ – ImAtWar

我建議你使用bootstrap。它使事情變得更容易。 – apokryfos

看看這裏：http://stackoverflow.com/questions/21014209/how-do-i-make-a-grid-with-html-and-css-with-divs – cani

我已經添加了一個顯示屬性和一個父div的頂部兩個div和一個底部兩個div。檢查出來here。所以，

<div style="display:flex"> tech_calls Div quantech_calls Div </div>

同樣，對於其他兩個。

來源

2016-03-22 12:22:09

不明白downvote的原因。 –

我不低調，但可能是因爲你的答案中沒有代碼（甚至更糟糕：有些'輸入代碼）。將來你的鏈接可能不再可用，因此你的答案是毫無價值的。 – Wavemaster

我沒有downvote，但我會說使用顯示：flex;通常不是一個好的答案，因爲IE可能無法處理它。 – apokryfos

調整網頁中的分區

回答

相關問題