css - css 用填充将 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

Answer 2

用这个

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

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

演示

Answer 3

你有你content div width的等于100%。

因此，如果您有 4 个 div，则需要将宽度设置为content A, B, C, Dto 25%。

因为25%*4 = 100%

也许将属性添加display:inline到content A, B, C, D

Answer 4

如果您希望它们适合容器并随意使用，那么您的所有内容都div必须是宽的，以便子 div 的边框包含在宽度/高度内。工作演示。25%box-sizing: border-box;

Answer 5

在你的 html 中使用 flex 属性

#content
{
你的 CSS 属性
display:flex;
}

这将在宽度和高度上平均划分主分区标签内的子分区标签。