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;
  }

<强> DEMO

Answer 3

您的content div width等于100%。

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

因为25%*4 = 100%

可能会将属性display:inline添加到content A, B, C, D

Answer 4

如果您希望它们适合容器并且可以使用div，那么25%所有box-sizing: border-box;必须为{{1}}宽，以便子div的边框包含在内部宽度/高度。 Working demo

Answer 5

在你的html中使用flex属性

＃内容
   {
   你的css财产
   显示：弯曲;
   }

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

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

5 个答案: