在前端页面的布局过程中,作者遇到了,这样一个问题
当子元素为浮动元素时,父元素设置相应属性后可以被子元素撑开,但无法实现子元素的均分布局,在网络上找了半小时的资料,没有符合要求的布局示例,
今天自己用jQuery实现了动态计算子元素的margin,实现了子元素的均分布局,特来分享一下...
先上效果图
parent_son
源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
/*适配非主流浏览器(IE浏览器)*/
.clearfix{
zoom:1;
}
.parent{
width:100%;
border-width: 1px;
border-style: solid;
border-color: #d29922;
margin: 0 auto;
}
.son{
width: 150px;
height: 150px;
border: 2px solid #509839;
margin: 10px;
float: left;
text-align: center;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 平均分布子级元素
function ave_son_element() {
// 动态获取父标签宽度
var parent_width = $(".parent").width();
$("#p_width").text(parent_width);
// 获取子标签宽度
var son_width = $(".son:first").outerWidth();
$("#s_width").text(son_width);
// 取余数
var remainder = parent_width % son_width;
// 取整数商
var quotient = (parent_width-remainder) / son_width;
$("#quotient").text(quotient);
// 获取子元素左右margin值
var margin_value = parseInt((parent_width - ((son_width)* quotient)) / (quotient*2));
$("#margin_value").text(margin_value);
// 设置子元素左侧margin
$(".son").css("margin-left", margin_value);
// 设置子元素右侧侧margin
$(".son").css("margin-right", margin_value);
}
// 页面渲染时 平均分布 子级元素
ave_son_element();
$(window).resize(function () {
// 父级 尺寸变化时, 平均分布子级元素
ave_son_element()
});
})
</script>
</head>
<body>
<div class="parent clearfix">
<div class="son">君不见</div>
<div class="son">黄河之水</div>
<div class="son">天上来</div>
<div class="son">奔流到海</div>
<div class="son">不复回</div>
<div class="son">高堂明悲白发</div>
<div class="son">朝如青丝暮成雪</div>
<div class="son">人生得意须尽欢</div>
<div class="son">莫使金樽空对月</div>
</div>
<div>
<span>父标签宽度:</span><span id="p_width"></span><br>
<span>子标签宽度(包含border):</span><span id="s_width"></span><br>
<span>单行子级标签个数为:</span><span id="quotient"></span><br>
<span>子级标签左右的margin值为:</span><span id="margin_value"></span>
</div>
</body>
</html>