Question

我有一个宽度为757像素，高度为484像素的主div。我想把这个div分成3X3个方格。我不知道如何使用HTML5和CSS3做到这一点？

Answer 1

内部框CSS。

.box {
    width: calc(100% / 3);
    height: calc(100% / 3);
    background: #bada55;
    float: left;
    outline:1px solid green;
}

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wrap {
  width: 757px;
  height: 484px;
  border: 1px solid red;
  overflow: hidden;
  margin: 10px auto;
}
.box {
  width: calc(100% / 3);
  height: calc(100% / 3);
  background: #bada55;
  float: left;
  outline: 1px solid green;
}

＆＃13;

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

Answer 2

我添加了颜色，以便更直观地向您显示方框。

HTML：

<div class="Main">
    <div class="Main-Top">
        <div class="Main-100" id="color1">
            1
        </div>
        <div class="Main-010" id="color2">
            2
        </div>
        <div class="Main-001" id="color1">
            3
        </div>
    </div>
    <div class="Main-Middle">
        <div class="Main-100" id="color2">
            4
        </div>
        <div class="Main-010" id="color1">
            5
        </div>
        <div class="Main-001" id="color2">
            6
        </div>
    </div>
    <div class="Main-TBottom">
        <div class="Main-100" id="color1">
            7
        </div>
        <div class="Main-010" id="color2">
            8
        </div>
        <div class="Main-001" id="color1">
            9
        </div>
    </div>
</div>

CSS：

.Main {
    width: 757px;
    height: 484px; }
.Main-Top, .Main-Middle, .Main-Bottom {
    margin: 0px;
    padding: 0px; }
.Main-100, .Main-010, .Main-001 {
    float: left;
    width: calc(757px/3);
    height: 161px;
    margin: 0px;
    padding: 0px; }
#color1 {
    background: #b8fccb; }
#color2 {
    background: #ff0000; }

添加了JSFiddle，以便您可以根据需要修改一下

http://jsfiddle.net/xo3yax9j/1/

使用div标签划分屏幕

2 个答案: