CSS大牛快来给小弟指导一下啊!

Brant_Feng 发布于 2013/05/16 16:57
阅读 252
收藏 0

面试题,在一个1000x1000的容器里,放9行9列的小方格,每个方格大小是100x100,方格之间的间距是10,用css画出来。

小弟虽然实现了一个,代码如下,但是总感觉css有点乱而且在浏览器缩放的时候就出现问题了。求大神指点啊!

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }
	#container{
		padding-left: 10px;
		width: 990px;
		height: 1000px;
		margin: 10px auto;
		background-color: black;
	}
	
	.item{
		width: 100px;
		height: 100px;
		background-color:silver;
		float: left;
		margin: 10px 10px 0px 0px;
	}
  </style>
</head>
<body>
  <div id="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
  </div>
</body>
</html>

加载中
0
铂金小鸟
铂金小鸟
table 可以嘛?
0
王瑞平
王瑞平

这个必须设置九个横向div

每个横向width:990,height:110

横排之中几个小格子diplay:inline;float:left;

看似你格子没问题,格子缩小后就全跑走了

 

 

Brant_Feng
Brant_Feng
刚才在网易主页的底部上也看到这种布局。 网易是在这些格子与容器之间又加了一层,把这层的margin-left设置成负的。里面的格子全部设置margin-top和margin-right。然后float为left。
0
天闲
天闲
没跑!都挺好!用的什么浏览器?ie6?
Brant_Feng
Brant_Feng
用的chrome,格子没跑。你注意看最后一行的黑条,在缩放的时候,黑条没有缩放。
返回顶部
顶部