自适应图片九宫格 css,高度自适应的九宫格效果

高度自适应的九宫格效果

html, body { height: 100%; margin: 0; }

.page {

position: absolute;

left: 0; top: 0; right: 0; bottom: 0;

}

.list {

float: left;

height: 33.3%; width: 33.3%;

position: relative;

}

.list:before {

content: '';

position: absolute;

left: 10px; right: 10px; top: 10px; bottom: 10px;

border-radius: 10px;

background-color: #cad5eb;

}

.list:after {

content:attr(data-index);

position: absolute;

height: 30px;

left: 0; right: 0; top: 0; bottom: 0;

margin: auto;

text-align: center;

font: 24px/30px bold 'microsoft yahei';

}

自适应图片九宫格 css,高度自适应的九宫格效果相关推荐

CSS高度自适应问题
关键词:CSS, 高度, 自适应高度为100% 对某个标签设置了高度为100%后,发现不起作用. 解决方法:对body(有时候需要html)添加代码: body { height:100% } 原因 ...
css设置元素网页高度自适应,css高度自适应如何实现？css高度根据内容自适应的简单方法...
在进行网页开发时,可能会遇到这样的情况,网页中的内容会超出你原先设置的高度或者宽度,这时就需要实现高度自适应或者宽度自适应,下面这篇文章将给大家来介绍关于css高度自适应. PS:css宽度自适应的介 ...
html中高度自动调整,css高度自适应如何实现？css高度根据内容自适应的简单方法...
在进行网页开发时,可能会遇到这样的情况,网页中的内容会超出你原先设置的高度或者宽度,这时就需要实现高度自适应或者宽度自适应,下面这篇文章将给大家来介绍关于css高度自适应. PS:css宽度自适应的介 ...
css高度自适应以及高度塌陷总结
高度塌陷: 场景:子元素有浮动,父元素没有设置高度或者设置最小高度,父元素会出现高度塌陷高度塌陷的解决方法: 1.给高度塌陷的元素设置:overflow:hidden(原理:因为overflow:h ...
html中dl块自适应高度,CSS高度自适应代码(用了都说好)
body { font-family: 宋体,Arial,serif; font-size: 12px; COLOR: #333333; margin:0 auto; padding:0; backg ...
Css高度自适应上下居中方式
实现高度自适应并且上下居中 <div id="wrap"><div class="box">DemoSeat</div> & ...
CSS高度自适应 height:100%;
在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果为什么呢? 之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE ht ...
css高度自适应出现盒子高度塌陷问题
在网页布局中经常会遇到想给盒子设置高度自适应但出现高度塌陷问题,造成这个问题的原因就在于父盒子没有设置高度,子盒子有浮动这里有四种解决高度塌陷的方法一.给父盒子添加高度,这个可以从根本上解决问题, ...
html input高度自适应,模拟input输入框高度自适应
记得几年前就碰到过这种需求,现在又碰到了,解决方法就是用contenteditable属性来模拟textarea或者input来实现根据输入内容高度自适应,因为contenteditable属性的元素 ...
CSS 背景图片宽度100% 高度自适应
.bg{width: 100%;height: 100%;background-image: url("../../public/img/bg.png");background-s ...

自适应图片九宫格 css,高度自适应的九宫格效果

自适应图片九宫格 css,高度自适应的九宫格效果相关推荐

最新文章

热门文章