<!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{
width:100%;
height: 100%;
}
.son1{
position: relative;
-webkit-box-flex:1;
}
.son1 span{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
text-align: center;
width: 100%;
height: 20px;
white-space:nowrap;/*禁止文字自动换行*/
color:#666;
}
#parent div:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="parent">
<div class="son1">
<img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/o_sky.jpg" alt="" id="img1"/>
<span>内容区1的文字介绍</span>
</div>
</div>
<p>3212231</p>
<div id="parent_div" style="width:100%;background:#999;display:-webkit-box;/*height:500px;*/"><!--内部不含图片需定义高，将盒子撑起来-->
<div class="son1_div" style="position: relative;-webkit-box-flex:1;background: red">
<div class="son1_div_fix" style="background:yellow;position: absolute;left: 0;right: 0;/*bottom: 0;*/top:0;margin: auto;text-align: center;width: 100%;/*margin:-38% 0 0 0;*/">
<h3 style="white-space:nowrap;" id="h3_1">我是第一个定位的盒子</h3>
<img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_sky.jpg" alt="" style="width: 100%;" id="img_fix1"/>
</div>
</div>
<div class="son2_div" style="position: relative;-webkit-box-flex:1;background: green">
<div class="son2_div_fix" style="background:purple;position: absolute;left: 0;right: 0;/*bottom: 0;*/top:0;margin: auto;text-align: center;width: 100%;/*margin:-38% 0 0 0;*/">
<h3 style="white-space:nowrap;" id="h3_2">我是第二个定位的盒子</h3>
<img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_sky.jpg" alt="" style="width: 100%;" id="img_fix2"/>
</div>
</div>
<div class="son3_div" style="position: relative;-webkit-box-flex:1;background: blue">
<div class="son3_div_fix" style="background:pink;position: absolute;left: 0;right: 0;/*bottom: 0;*/top:0;margin: auto;text-align: center;width: 100%;/*margin:-38% 0 0 0;*/">
<h3 style="white-space:nowrap;" id="h3_3">我是第二个定位的盒子</h3>
<img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_sky.jpg" alt="" style="width: 100%;" id="img_fix3"/>
</div>
</div>
</div>
<div id="show_down" style="width: 100%;background: yellowgreen;">231231</div>
</body>
</html>
<script src="https://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<script>
// img_1=document.getElementById("img1");
// img_1.onclick = function(){
// window.open('http://baidu.com','_blank');
// }
// img_2=document.getElementById("img2");
// img_2.onclick = function(){
// window.open('http://www.sina.com','_blank');
// }
// img_3=document.getElementById("img3");
// img_3.onclick = function(){
// window.open('http://www.taobao.com','_blank');
// }
</script>
<script>
</script>
<script>
// $(window).load 解决谷歌浏览器的兼容问题
$(window).load(function(){
var width=$(window).width();
var one_img=$("#img_fix1").css("height");//获取三图中 第一张图的高
var h3_1=$("#h3_1").css("height");//获取第一部分文字的高
var two_img=$("#img_fix2").css("height");//获取三图中 第2张图的高
var h3_2=$("#h3_2").css("height");//获取第2部分文字的高
var three_img=$("#img_fix3").css("height");//获取三图中 第3张图的高
var h3_3=$("#h3_3").css("height");//获取第3部分文字的高
if(980<=width<=1920){
$(".son1_div_fix").css("height",one_img+h3_1);
$(".son2_div_fix").css("height",two_img+h3_2);
$(".son3_div_fix").css("height",three_img+h3_3);
$(".son1_div").css("height",one_img+h3_1);
$("#parent_div").css("height",one_img+h3_1);
}
})
$(window).resize(function(){
var width=$(window).width();
var one_img=$("#img_fix1").css("height");//获取三图中 第一张图的高
var h3_1=$("#h3_1").css("height");//获取三图中 第一部分文字的高
var two_img=$("#img_fix2").css("height");//获取三图中 第2张图的高
var h3_2=$("#h3_2").css("height");//获取第2部分文字的高
var three_img=$("#img_fix3").css("height");//获取三图中 第3张图的高
var h3_3=$("#h3_3").css("height");//获取第3部分文字的高
if(980<=width<=1920){
$(".son1_div_fix").css("height",one_img+h3_1);
$(".son2_div_fix").css("height",two_img+h3_2);
$(".son3_div_fix").css("height",three_img+h3_3);
$(".son1_div").css("height",one_img+h3_1);
$("#parent_div").css("height",one_img+h3_1);
}
})
</script>
浙公网安备 33010602011771号