javascript 文本条目自适应条目间距离

最新推荐文章于 2025-09-06 08:01:57 发布

weixin_30800807

最新推荐文章于 2025-09-06 08:01:57 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yibinpan/archive/2013/05/27/3100866.html

本文介绍了通过HTML、CSS和JavaScript实现网页元素高度自适应布局的方法，并详细解释了如何使用jQuery进行元素高度计算和动态调整。

<html>
<head>
<style>
.content
{
height:200px;
width: 200px;
background-color:red;
}
.descrip
{
max-width:200px;
}
</style>
<script type="text/javascript" src="jquery-1.10.0.min.js"></script>
</head>
<body>
<div class="content">
<div id = "item1" class="item">
<div class="title">title</div>
<div class="descrip">description description description description</div>
</div>
<div id = "item2" class="item">
<div class="title">title</div>
<div class="descrip">description description description description description</div>
</div>
<div id = "item3" class="item">
<div class="title">title</div>
<div class="descrip">description</div>
</div>
</div>
<script>
var contentHeight = $(".content").height();
var itemHeight = $(".item").outerHeight(true);

var totalHeight=0;
var itemNum = 0;
$(".item").each(function(obj){
var itemHeight = $(this).outerHeight(true);
totalHeight += itemHeight;
itemNum += 1;

});

var marginDistance = ($(".content").height() - totalHeight)/(itemNum - 1);
$(".item").css("margin-bottom",marginDistance);
</script>
</body>
</html>

转载于:https://www.cnblogs.com/yibinpan/archive/2013/05/27/3100866.html