用jq实现盒子动态水平垂直居中套娃

最新推荐文章于 2024-04-19 10:18:52 发布

M4与烧火棍

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：前端 html css jq

本文链接：https://blog.csdn.net/qq_19603139/article/details/78498506

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现的目的如图所示

介绍一下盒子在盒子中水平垂直居中的技巧：

<div class="container">
        <div class="floater"></div>
        <div class="content"> </div>
</div>

container类为套在最外层的盒子，content类则是盒子里面的盒子，是我们呢要水平垂直居中的对象

关键点在于floater类的作用

	<style>
		*{
			padding: 0;
			margin: 0;
		}
		html,body,.container{
			width: 100%;
			height: 100%;
		}
		.container{
			border:1px solid black;
			margin: 0 auto;
		}
		.floater{
			height: 50%;
			float: left;
                        margin-bottom:-250px;
		}
		.content{
			clear: both;
		        border: 1px solid black;
			margin: 0 auto;
                        width:500px;
                        height:500px;
		}
	</style>

.floater的高度设为共同父辈盒子的50%,给予margin-bottom的值为.content高度的一般，之后在.content中清除浮动，便可以达到水平垂直居中的效果

这个方法除了要多设一个前置标签外几乎没有其他缺点，可以放心大胆使用

之后便是动态的水平垂直居中，因为最重要的部分已经差不多哦了，这里直接附上加工后的全部代码以供参考

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/jquery-1.11.1.js"></script>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		html,body,.container{
			width: 100%;
			height: 100%;
		}
		.container{
			background: red;
			margin: 0 auto;
		}
		.floater{
			height: 50%;
			float: left;
		}
		.content{
			clear: both;
		/* 	border: 1px solid yellow; */
			margin: 0 auto;
			background: blue;
		}
	</style>
	<script>
		$(
			function(){
				var i = setInterval(function(){
						for (var i = 0;  i < $(".content").length; i++) {
						var papa=$(".content").parent().eq(i);
						var son = $(".content").eq(i);
						var floater = $(".floater").eq(i);
						son.css('width',''+papa.width()/1.25+'px').css('background','rgb('+parseInt(255*Math.random())+','+parseInt(255*Math.random())+','+parseInt(255*Math.random())+')');
						son.css('height',''+papa.height()/1.25+'px');
						floater.css('margin-bottom',''+ (-son.height()/2) +'px')
					}
					$(".content").eq($(".content").length-1).append('<div class="floater"></div><div class="content"></div>');
				},1000)
			}
		)
	</script>
</head>
<body>
	<div class="container">
		<div class="floater"></div>
		<div class="content">
			<div class="floater"></div>
			<div class="content">
				<div class="floater"></div>
				<div class="content">
					<div class="floater"></div>
					<div class="content">
						<div class="floater"></div>
						<div class="content">
							<div class="floater"></div>
							<div class="content"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

重点在于class的遍历，其他的地方就可以自己发挥了

M4与烧火棍

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用jq实现盒子动态水平垂直居中套娃

实现的目的如图所示介绍一下盒子在盒子中水平垂直居中的技巧： container类为套在最外层的盒子，content类则是盒子里面的盒子，是我们呢要水平垂直居中的对象关键点在于floater类的作用 *{ padding: 0; margin: 0; } html,body,.container{ wi
复制链接

扫一扫