在前端頁面的布局過程中,作者遇到了,這樣一個問題
當子元素為浮動元素時,父元素設定相應屬性後可以被子元素撐開,但無法實作子元素的均分布局,在網絡上找了半小時的資料,沒有符合要求的布局示例,
今天自己用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>
對應的完整源碼,以及jQuery在這裡
http://www.jianshu.com/p/4f28e1ae08b1
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)