自应式布局

最新推荐文章于 2023-02-03 14:32:50 发布

weixin_30642305

最新推荐文章于 2023-02-03 14:32:50 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/kulowreidyql/p/5706229.html

版权

今天我们学习了自应式布局，代码如下：

<!DOCTYPE html>

<html>

<style>

div{border: 1px solid inherit;margin: 8px;}

#div1{

font-weight: 800;

width: 100%;

text-align: center;

}

#div11{

width: 80%;

text-align: center;

font-size: 24px;

margin:0 auto;

}

#div12{

width: 90%;

text-align: center;

color: #979797;

font-size: 18px;

margin:0 auto;

}

#div13{

vertical-align:middle;

width: 100%;

text-align: center;

margin:0 auto;

}

div>div>div{

border:2px solid #b3b3b3;

width: 225px;

text-align: center;

float: left;

display: inline;

}

img{

width: 100%;

height: 100%;

}

#tu1,#tu2,#tu3,#tu4,

#tu5,#tu6,#tu7,#tu8{

border: 2px solid #a7a7a7;

width: 345px;

}

</style>

</head>

<body>

<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/>

<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>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>