![CSS 点击按钮以后修改DIV的高度，代码怎么写？[有代码]](/aiimages/CSS+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE%E4%BB%A5%E5%90%8E%E4%BF%AE%E6%94%B9DIV%E7%9A%84%E9%AB%98%E5%BA%A6%EF%BC%8C%E4%BB%A3%E7%A0%81%E6%80%8E%E4%B9%88%E5%86%99%EF%BC%9F%5B%E6%9C%89%E4%BB%A3%E7%A0%81%5D.png)
如下：
1、line-height属性使文字垂直居中。
2、使用绝对定位和负外边距对块级元素进行垂直居中(已知元素的高度)。
3、使用绝对定位和transform进行垂直居中（未知元素高度）。
4、使用flex布局。
介绍
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
有两点必须要注意的：1. HTML中IE条件注解部分的标签要用内联对象标签。
2. “<!--[if IE]><span class="edge"></span><![endif]-->”要放在内容之前。如果放在之后，内容是中文时会不能居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>无标题文档</title>
<style type="text/css">
.holder{
width:740px
height:300px
border:1px solid #777
text-align:center
display:table-cell
vertical-align:middle
}
/*以下样式针对IE*/
.edge{
width:0
height:100%
display:inline-block
vertical-align:middle
}
.container{
vertical-align:middle
display:inline-block
}
</style>
</head>
<body>
<div class="holder">
<!--[if IE]><span class="edge"></span><![endif]-->
<!--[if IE]><span class="container"><![endif]-->测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<!--[if IE]></span><![endif]-->
</div>
</body>
</html>
A.每个图片宽高是统一的还是不一样的?如果不统一，请直接跳到我的回答末尾处，参看：Z
B.这样做要上下垂直居中是css目前办不到的，请用js，同上，直接跳到回答末尾：Z处
C.关于上一条B垂直居中的问题：但如果图片数量够多能撑开浏览器高度到设备屏幕一屏高度区域以外就不存在这个垂直居中问题了，本身就垂直居中了
其他就简单了：
先把ul宽高用百分比；
接着把li浮动(不考虑pc端的话，inline-block也行)
li的宽高也百分比
a的宽高也百分比
最后里面的img宽高也百分比
就是一直从ul>li>a一层一层下来，每个子都是百分比尺寸相对父宽高
(我后面代码里还多个包含ul的div，是编辑器生成的模板基础上写的，你可以删掉那个div)
至于图片6个变成13个或57个的问题，总体图片数量不固定，每行数量又根据屏幕大小在变，一行两个图、三个图或更多，肯定有不能整除会落单的图片，那个你没有任何办法处理，只能让最后一行有空位，数学上不能整除，任何程序语言都无能为力的事情
再然后就是媒体查询：
屏幕宽超过你设定的界限时，li的百分比宽度小点，然一行能排三个或更多
屏幕宽小于你设定的界限时，把li百分比宽度设置到40-50%左右，一行只摆两个
<div class="wrapper"> <ul id="lists"><li><a href="####"><img src="1.jpg" alt="" /></a></li>
<li><a href="####"><img src="1.jpg" alt="" /></a></li>
<li><a href="####"><img src="1.jpg" alt="" /></a></li>
<li><a href="####"><img src="1.jpg" alt="" /></a></li>
<li><a href="####"><img src="1.jpg" alt="" /></a></li>
<li><a href="####"><img src="1.jpg" alt="" /></a></li>
</ul> </div> body {
margin: 0
padding: 0
}
@media screen and (min-width: 1px) and (max-width: 319px) {
/*小于320x480的老式手机设备一般不用管了吧，上面有webkit内核浏览器的太少了，有ie9-10的基本上不存在*/
} @media screen and (min-width: 320px) and (max-width: 480px) { .wrapper
{
width: 100%
height: 100%
margin: 0 auto
text-align: left
border: 1px red solid
background: #4A2C40
} #lists{
width: 100%
height: 100%
border: 1px green solid
} #lists li{
display: inline-block
width: 40%
height: 30%
margin: 2%
border: 1px #fff solid
position: relative
left: 10%
} #lists li img{
width: 100%
height: 100%
} #lists li a{
width: 100%
height: 100%
display: block
border: 1px red solid
} } @media only screen and (min-width: 321px) and (max-width: 1024px) { .wrapper
{
width: 100%
height: 100%
margin: 0 auto
text-align: left
border: 1px red solid
background: #333
} #lists{
width: 100%
height: 100%
border: 1px green solid
} #lists li{
display: inline-block
width: 40%
height: 30%
margin: 2%
border: 1px #fff solid
position: relative
left: 4.7%
} #lists li img{
width: 100%
height: 100%
} #lists li a{
width: 100%
height: 100%
display: block
border: 1px red solid
} }
@media only screen and (min-width: 1029px){ .wrapper
{
width: 100%
height: 100%
margin: 0 auto
text-align: left
border: 1px red solid
background: #14334D
} #lists{
width: 100%
height: 100%
border: 1px green solid
} #lists li{
display: inline-block
width: 25%
height: 30%
margin: 2%
border: 1px #fff solid
position: relative
left: 5.4%
} #lists li img{
width: 100%
height: 100%
} #lists li a{
width: 100%
height: 100%
display: block
border: 1px red solid
} }
另外：
1.li 的相对定位是为了让所有图片横向看上去相对居中(没办法绝对精确)，要绝对，参考：Z处
2.代码里面很多玩意100%了，再加1px边框理论上是不对的，只是写的时候方便看元素大小，要算尺寸应该-1px再算百分比
3.实际上我是在firefox上直接拉窗口大小测试的，实现了图片随屏幕大小缩放，窗口小于一定尺寸时一行三个图变切换为一行两个；但是大半夜了我也不敢去卧室翻平板和手机出来试，真机环境上估计可能上面的代码可能还得改改才能跑。而且估计webkit和ie9-10环境下估计细节还有错误需要兼容处理..
...
...
...
...
传说中的Z：
你这个需求麻烦啊麻烦，要用js处理好多复杂的细节还有各种兼容的坑等人跳，知道上有人帮你写出来现成代码的几率恐怕小于0.001%！！！
