css разделите div на четыре равные части с заполнением

Question

У меня есть div div, и там я хотел бы иметь четыре равных div в зависимости от размера и ширины страницы .

В настоящее время это мой код:

HTML:

<div id="content"> 
<div class='A' id="none" data-panel_type="none"> 
    <textarea id="1" name="none"></textarea> 
</div> 
<div class='B' id="none" data-panel_type="none"> 
    <textarea id="2" name="none"></textarea> 
</div> 
<div class='C' id="none" data-panel_type="none"> 
    <textarea id="3" name="none"></textarea> 
</div> 
<div class='D' id="none" data-panel_type="none"> 
    <textarea id="4" name="none"></textarea> 
</div> 
</div> 

CSS:

#content { 
    border: 2px solid; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    top: -15px; 
    left: -15px; 
    padding: 10px; 
    } 

    #content .A { 
    border: 2px solid; 
    width:50%; 
    height: 50%; 
    float: left; 
    background: purple; 
    } 

    #content .B { 
    border: 2px solid; 
    width:50%; 
    height: 50%; 
    float: left; 
    background: purple; 
    } 

    #content .C { 
    border: 2px solid; 
    width:50%; 
    height: 50%; 
    float: left; 
    background: purple; 
    } 

    #content .D { 
    border: 2px solid; 
    width:50%; 
    height: 50%; 
    float: left; 
    background: purple; 
    } 

что мне нужно сделать, чтобы изменить к нему для того, чтобы работать? Благодарю.

Answer 1

можно использовать box-sizing свойство (дополнительную информацию о MDN), добавив

#content, #content > div { 
    -webkit-box-sixing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

см http://jsbin.com/egukon/1/edit

Answer 2

У вас есть content div width который равен 100%.

Итак, если у вас есть 4 div, вам необходимо установить ширину для content A, B, C, D в 25%.

Поскольку 25%*4 = 100%

Может добавить свойство display:inline к content A, B, C, D

Answer 3

Все ваши div должен b e 25% широкий, если вы хотите, чтобы они поместились в контейнер и не стесняйтесь использовать box-sizing: border-box;, чтобы границы дочерних divs содержались внутри ширины/высоты. Working demo.

Answer 4

Используйте этот

#content { 
    border: 2px solid; 
    position: relative; 
    float:left; 
    width:100% 
    } 

    #content div { 
    float:left; 
    width:25%; 
    height: 50%; 
    background: purple; 
    display:inline-block; 
    } 

DEMO

Answer 5

использование гибкого недвижимость в вашем HTML

#content
{
Ваш CSS свойство
дисплей: сгибать;
}

Это будет одинаково разделять ваши теги подраздела внутри основного тега разделения по ширине и высоте.