欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

使用css实现网格布局

 

css实现的网格布局,自适应宽度变化,间隙完全相等,每个小格子的宽和高也相等。

实现这样的页面效果所涉及的知识点:

块元素在行内布局时,注意两个div之间的空格。

css实现div宽和高相等的关键是使用padding-bottom这个属性,我们设置为100%,完全撑父div

div垂直水平居中有很多种方法,这里我采用绝对布局,然后做变换来实现。

css3的盒模型有两种,一种是IE的盒模型:盒子的宽高包含边框,填充和边距,另一种W3C盒子模型:与IE盒模型相反。

htmlcss代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>css宽高相等</title>

<style>

.menu-cells-wrap {

border: 5px solid green;

padding: 2px;

width: 600px;

box-sizing: content-box;

}

.menu-cell {

width: 25%;

display: inline-block;

position: relative;

box-sizing: border-box;

background: white;

}

.menu-cell>div {

box-sizing: border-box;

position: absolute;

padding: 2px;

width: 100%;

height: 100%;

left: 0;

top: 0;

}

.menu-cell:before {

content: "";

display: inline-block;

padding-bottom: 100%;

width: .1px;

vertical-align: middle;

}

.content-wrap {

position: relative;

width: 100%;

height: 100%;

box-sizing: content-box;

background: orange;

}

.content-wrap:active {

background: lightblue;

}

.content {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

</style>

</head>

<body>

<div class="menu-cells-wrap">

<div class="menu-cell">

<div><div class="content-wrap">

<div class="content">查询房间</div>

</div></div>

</div><!-- 去掉两个div之间的空格

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">好友房间</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">房间信息</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">求和</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">认输</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">聊天</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">游戏规则</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">登录</div>

</div></div>

</div>

</div>

</body>

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r43916.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-10-28 12:21 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。