今天我们学习了自应式布局，代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{border: 1px solid inherit;margin: 8px;}
#div1{
font-weight: 800;
100%;
text-align: center;
}
#div11{
80%;
text-align: center;
font-size: 24px;
margin:0 auto;
}
#div12{
90%;
text-align: center;
color: #979797;
font-size: 18px;
margin:0 auto;
}
#div13{
vertical-align:middle;
100%;
text-align: center;
margin:0 auto;
}
div>div>div{
border:2px solid #b3b3b3;
225px;
text-align: center;
float: left;
display: inline;
}
img{
100%;
height: 100%;
}
#tu1,#tu2,#tu3,#tu4,
#tu5,#tu6,#tu7,#tu8{
border: 2px solid #a7a7a7;
345px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div11">sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
</div>
<br/><br/>
<hr style=" 75%"/>
<hr style=" 55%"/>
<br/>
<div id="div12">Fusce euismod consequat ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor. Aliquam congue fermentum nisl.
Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula.
Aliquam dapibus tincidunt metus</div>
<br/>
<div id="div13">
<div id="tu8">
<div style=" 330px">
<img src="image/pic6.jpg" alt=""/>
</div>
</div>
<div id="tu1">
<div style=" 330px">
<img src="image/pic7.jpg" alt=""/>
</div>
</div>
<div id="tu2">
<div style=" 330px">
<img src="image/pic8.jpg" alt=""/>
</div>
</div>
<div id="tu3">
<div style=" 330px">
<img src="image/pic9.jpg" alt=""/>
</div>
</div>
<div id="tu4">
<div style=" 330px">
<img src="image/pic10.jpg" alt=""/>
</div>
</div>
<div id="tu5">
<div style=" 330px">
<img src="image/pic11.jpg" alt=""/>
</div>
</div>
<div id="tu6">
<div style=" 330px">
<img src="image/pic12.jpg" alt=""/>
</div>
</div>
<div id="tu7">
<div style=" 330px">
<img src="image/pic13.jpg" alt=""/>
</div>
</div>
</div>
</div>
</body>
</html>
