【前端の獅子攻めの道】九宮格

CSSケースモデルと位置決め練習——九宮格
プレゼンテーションアドレス
クリックしてリンクを開く
いくつかの問題は先にここに置いてください(伝言指導を歓迎します):
画面の割合は100%、%200、%300ではありません.の場合grid_wrapperの右下にギャップが発生しました(borderコメントを削除するとこの問題がわかります).
実装コードは次のとおりです.

/*CSS File of NineGrid*/
body{
	margin: 0;
	padding: 0;
}

/* 1     */
div.grid_wrapper{
	width: 260px;/*..80*3+5*4..*/
	height: 260px;
	padding: 0;
	margin:0 auto;/*    */

	/*border: green 1px solid;*/
}

/*-----   -----*/
/*        */
.grid a:link, .grid a:visited{
	width: 80px;
	height: 80px;
	border: #999 5px solid;
	float: left;
	text-decoration: none;
	text-align: center;
	line-height: 80px;
	font-size: 30px;
	font-family: Arial,Verdana,Sans-serif;

	margin-left: -5px;
	margin-top: -5px;
	position: relative;
	z-index: 1;/*    */
}
/*    */
.grid a:hover{	
	border-color: #222;
	z-index: 2;
}
/*    */
.grid a:active{
	border-color: #f00;
}

	
	




	
1
	
2
	
3
	
4
	
5
	
6
	
7
	
8
	
9