我有一个内容 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;
}
我需要对其进行哪些更改才能正常工作?谢谢。
最佳答案
您可以使用 box-sizing
属性(有关 MDN 的更多信息),添加
#content, #content > div {
-webkit-box-sixing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
关于css 用 padding 将 div 分成四个相等的部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15969492/