使用div+css实现九宫格(ps：要熟练掌握position样式用法)

html-css018

使用div+css实现九宫格(ps：要熟练掌握position样式用法),第1张

<style>

.a{width:300pxheight:300pxborder:1px solid #cccborder-right:0border-bottom:0}

.a div{width:99pxheight:99pxborder-right:1px solid #cccborder-bottom:1px solid #cccfloat:left}

</style>

<div class="a">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

这个应该不用position吧    这样显得好复杂

愚你所说，就是不用所谓的表格进行布局，让它回到它应该呆的地方，而所谓的div+css，只是统称，意为用相应的标签做它应该做的事，而不是乱套来套去…用css做外衣，实现内容与表现分离，而不是什么都乱堆在一起…

以上…

<!DOCTYPE html>

<html>

<head>

    <meta charset="GBK">

    <title>test</title>

   <style type="text/css">

       *{

           box-sizing: border-box

           margin: 0

           padding: 0

       }

       .container{

           width: 90px

           height: 90px

       }

       .item{

           width: 30px

           height: 30px

           display: block

           float: left

       }

   </style>

</head>

<body>

<div class="container">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

</div>

</body>

</html>

<script type="text/javascript">

    var items = document.querySelectorAll('.item')

    Array.prototype.slice.call(items, 0).forEach(function(item){

        item.style.backgroundColor = '#'+(~~(Math.random()*(1<<24))).toString(16)

    })

</script>