<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒布局-宽度自动分配-图片自适应</title>
<style>
*{ margin:0; padding:0}
#parent { width:100%; background:#999; display:-webkit-box; height:auto;}
#parent div { margin:5px;}
/*将盒子进行平均分配的主要代码*/
/*.son1{ -webkit-box-flex:1; }*/
/*.son2{ -webkit-box-flex:1; }*/
/*.son3{ -webkit-box-flex:1; }*/
/*.son3{ -webkit-box-flex:3; } */ /*假如此处为3，则此盒子是整个大盒子一块的1/3*/
.son1 img,.son2 img,.son3 img{
width:100%;
height: 100%;
}
.son1,.son2,.son3{
position: relative;
-webkit-box-flex:1;
}
.son1 span,.son2 span,.son3 span{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
text-align: center;
width: 100%;
height: 20px;
white-space:nowrap;/*禁止文字自动换行*/
}
</style>
</head>
<body>
<div id="parent">
<div class="son1">
<img src="test_img/111.jpg" alt=""/>
<span>内容区1的文字介绍</span>
</div>
<div class="son2">
<img src="test_img/111.jpg" alt=""/>
<span>内容区2的文字介绍</span>
</div>
<div class="son3">
<img src="test_img/111.jpg" alt=""/>
<span>内容区3的文字介绍</span>
</div>
</div>
</body>
</html>
