Question

我想用DIV形成一个方阵。

Div需要相切并显示为Excel电子表格，10 x 10个小方块。

我怎样才能做到这一点？

Answer 1

试试此代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.main-div {
    width: 900px;
}
.small-div {
    width: 10px;
    height: 10px;
    border: 1px solid #ccc; float:left;
}
</style>
</head>

<body>
<div class="main-div">
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>

</div>
</body>
</html>

Answer 2

一个非常简单的解决方案是将正方形和容器的大小设置为固定大小。

<div class="container">
   <div class="square"></div>
   <div class="square"></div>
   ...
</div>

假设您的方块应为20x20像素。然后要实现10x10网格，容器需要200x200像素。

添加边框会破坏它。因此，还要将框大小设置为包含20px的边框。

.container {
    width: 200px;
    height: 200px;
}

.square {
    width: 20px;
    height: 20px;
    border: 1px solid black;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

标准的html流程应该完成其余的工作。

另一种方法是使用表格。但是使细胞成为正方形有点复杂。

将div显示为网格

2 个答案: