Html 使用div标签划分屏幕

我有一个主div，宽757像素，高484像素。我想把这个div分成3X3个正方形。 我不知道如何使用HTML5和CSS3实现这一点？

内部框CSS

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

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.包裹{
宽度：757px；
身高：484px；
边框：1px纯红；
溢出：隐藏；
利润率：10px自动；
}
.盒子{
宽度：计算值（100%/3）；
高度：计算（100%/3）；
背景：#bada55；
浮动：左；
外形：1px纯绿色；
}

---

LOL！！！给你，正是你想要的

---

我添加了颜色，以便更直观地显示盒子的位置

HTML:

添加了JSFiddle，以便您可以根据需要对其进行一些修补

---

您可以创建81个子div，设置宽度：calc（100%/9）高度：calc（100%/9）…并将它们全部向左浮动。别忘了装上彩车！你想得到一个边上有9个正方形的网格吗？或者把空间分成一堆正方形，每个正方形是9px乘以9px？我很抱歉。我需要3x3而不是9x9。我的意思是总共9个方格。@nivea你不想要9x9个方格相信我，lol，你想把你的页面分成9乘9的网格，这是一个很大的区别，lol这正是我想要的。谢谢。不客气。@Paulie_，但这并不能回答他的问题！哈，事实上确实如此……他/她这么说：）@Paulie_D我同意，你解决了他们的问题，我只是觉得有趣，他们要求的是完全不同的东西。

.container{width: 757px; height: 484px; overflow: hidden;}
#one{width: 9px; height: 9px; float: left; background-color: blue;}
#two{width: 9px; height: 9px; float: left; background-color: red;}
#three{width: 9px; height: 9px; float: left; background-color: lightblue;}
#four{width: 9px; height: 9px; float: left; background-color: green;}
#five{width: 9px; height: 9px; float: left; background-color: lightgreen;}

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

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