css 用 padding 将 div 分成四个相等的部分

Question

我有一个内容 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