个人中心
gpt4 book ai didi

javascript - 我必须添加什么样的脚本才能使框自动对齐？

转载 作者：行者123 更新时间：2023-11-27 23:34:14 25 4
gpt4 key购买 nike 

<html>

<head>
	<title>nav page</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	<style>
		
		body{
			font-family:'Open Sans', Helvetica, sans-serif;
			color:#000;
			margin:0;
			background-color:#FFF;
			background-attachment:fixed;
		}
 
		a {
			text-decoration:none;
			color: #CDCDCD;
		}
 
		a:hover {
			text-decoration:none;
			color:#a0a0a0;
		}
		
		.navbar {
			position:fixed;
			background-color: #FFF;
			text-align:left;
			width: 100%;
			height: 50px;
			top:0;
			z-index:999;
		}
		
		/* this is the little separating grey line underneath the nav bar */
		.navunder {
				position:fixed;
				background-color: #888;
				width:100%;
				height:2px;
				top:50px;
				z-index:999;	
				-webkit-box-shadow: 0px 9px 4px -5px rgba(138,138,138,1);
				-moz-box-shadow: 0px 9px 4px -5px rgba(138,138,138,1);
				box-shadow: 0px 9px 4px -5px rgba(138,138,138,1);			
		}
		
		#title{
			float:left;
			margin-left:25px;
			margin-top:5px;
			text-transform:luppercase;
			text-align:center;
			font-size:14px;
			color: #CDCDCD;
			letter-spacing:2px;
			font-weight:bold;
			z-index:9999;
		}
		
		#title img {
			vertical-align:middle;
			height:40px;
			border:1px solid #B7B7B7;
			padding:0;
		}

		#navlinks {
			float:right;
			margin-right: 20px;
			margin-top:17px;
			fext-transform: uppercase;
			font-size:13px;
			font-family:
			color: #CDCDCD;
			text-align:right;
			z-index:999;
		}
		
		#navlinks a {
			padding:10px 10px 10px 0;
		}
		
		.logo {
			width:10px;
			height:10px;
			bottom:50px;
			left:800px;
			border: 1px solid #615c5c;
		}
		
		#containers {
			width:75%;
			text-align:center;  
			margin-top:120px;
			margin-bottom:100px;
			margin-left:auto;
			margin-right:auto;
		}
		
		#box{
			float:left;
			width:170px;
			height:auto;
			padding:10px;
			border: 0px solid #dbdbdb;
			padding:5px;
			background: #FFF;
			margin:15px;
			font-size:9px;
			text-align:left;
			-webkit-box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.18);
			-moz-box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.18);
			box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.18);
		}
		 
		.boxtitle{
			background:#fff;
			font-size:10px;
			padding:10px;
			margin:0px;
			margin-bottom:1px;
			text-align:left;
			text-indent:5px;
			text-transform:uppercase;
			font-weight:bold;
			letter-spacing:2px;
			border-bottom: 1px solid #dbdbdb;
		}
		 
		#box a{
			width:157px;
			font-size:9px;
			color:#000;
			letter-spacing:1px;
			margin-bottom:10px;
			padding:10px;
			padding-left:3px;
			background:#fff;
			border-bottom:1px solid #eeeeee;
			margin-bottom:2px;
			-webkit-transition: all .5s;
			text-align:left;
			text-transform:lowercase;
			display: block;
		}
		 
		#box a:hover{
			color:#65AC88;
			-webkit-transition: all .5s;
		}
		
		::-webkit-scrollbar { width: 4px; height: 3px;}
		::-webkit-scrollbar-button { width: 0px; height: 0px;}
		::-webkit-scrollbar-thumb { background: #e1e1e1; border: 12px none #ffffff; border-radius: 38px;}
		::-webkit-scrollbar-thumb:hover { background: #ffffff;}
		::-webkit-scrollbar-thumb:active { background: #000000;}
		::-webkit-scrollbar-track { background: #818181; border: 76px none #ffffff; border-radius: 100px;}
		::-webkit-scrollbar-track:hover { background: #666666;}
		::-webkit-scrollbar-track:active { background: #b5fde8;}
		::-webkit-scrollbar-corner { background: transparent;}

	</style>
</head>

<body>

	<nav>

		<div class="navbar">
			
			<div id="title">TAGS &emsp;<img src="{PortraitURL-30}"/>&emsp; PAGE</div>
			
			<div id="navlinks">
				<a href="/"><i class="fa fa-home"></i></a>
				<a href="https://www.tumblr.com/dashboard">dashboard</a>
				<a href="https://www.abi-s-themes.tumblr.com">&copy;</a>
			</div>
		
		</div>
		
		<div class="navunder"></div>
		
	</nav>

	<div id="containers">
		
		<div id="box">
			<div class="boxtitle">first box</div>
			
			<a href="#">first link</a>
			<a href="#">second link</a>
			<a href="#">third link</a>
			<a href="#">fourth link</a>
			<a href="#">fifth link</a>
		</div>
		
		<div id="box">
			<div class="boxtitle">second box</div>
			
			<a href="#">first link</a>
			<a href="#">second link</a>
		</div>
		
		<div id="box">
			<div class="boxtitle">third box</div>
			
			<a href="#">first link</a>
			<a href="#">second link</a>
			<a href="#">third link</a>
			<a href="#">fourth link</a>
			<a href="#">fifth link</a>
			<a href="#">sixth link</a>
			<a href="#">seventh link</a>
			<a href="#">eighth link</a>
			<a href="#">ninth link</a>
			<a href="#">tenth link</a>
		</div>
		
		<div id="box">
			<div class="boxtitle">fourth box</div>
			
			<a href="#">first link</a>
			<a href="#">second link</a>
			<a href="#">third link</a>
			<a href="#">fourth link</a>
			<a href="#">fifth link</a>
			<a href="#">sixth link</a>
		</div>
		
		<div id="box">
			<div class="boxtitle">fifth box</div>
			
			<a href="#">first link</a>
			<a href="#">second link</a>
			<a href="#">third link</a>
			<a href="#">fourth link</a>
			<a href="#">fifth link</a>
			<a href="#">sixth link</a>
			<a href="#">seventh link</a>
			<a href="#">eighth link</a>
			<a href="#">ninth link</a>
			<a href="#">tenth link</a>
		</div>
	</div>
</body>
</html>

我在学校一直在学习 HTML 和 CSS，但我对 javascript 和 jQuery 以及我想做的事情仍然很不安全，但不知道使用哪个代码基本上只是自动重新排列框。

我想要的是，无论我向第一个框添加多少标签，第五个框都会在第一个框的下方重新排列，顶部边距为 10px。

谢谢大家!

最佳答案

您要求使用 javascript，因此我将介绍一种(或几种)方法，这可以用 javascript 完成。

正如评论中提到的，这也可以使用直接的 css，使用 FlexBox .检查一下，但也要注意浏览器的兼容性。

使用 javascript (jQuery)，您可能想要查看所有框的大小，找到“最大尺寸”(最高的那个)，然后将所有框设置为与最高的框相同的高度。

此外，由于您是一名学生，我会就您标记中的一些内容提供一些建议/指导:

首先，一个 id对整个页面来说应该是唯一的。在您的代码中，您有许多元素的 id 为 box:<div id="box"> - 这些应该可以更改为具有类 - 偶数框:<div class="box"> .

现在到javascript:

// This is a shorthand for "document ready", and ensures you can use the `$` within the code contained inside the document ready
jQuery(function($) {
    // Set up our max height variable
    var maxHeight = 0;
    // Iterate over each box.  NOTE this assumes you've changed to class="box"
    $('.box').each(function() {
        // Use a small formula to determine if this element's height is larger, and if so, store that value in the variable
        maxHeight = Math.max($(this).height(), maxHeight);
    });
    // Now, assign that height to ALL of the boxes.
    $('.box').css('height', maxHeight);
});

现在，如果您想将其提升到一个新的水平，您可以将其设为一个函数，并且您可以在调整页面大小时随时调用该函数，以确保它们所有保持相同的高度:

jQuery(function($) {
    function setHeights() {
        // Set up our max height variable
        var maxHeight = 0;
        // Iterate over each box.  NOTE this assumes you've changed to class="box"
        $('.box').each(function() {
            // Use a small formula to determine if this element's height is larger, and if so, store that value in the variable
            maxHeight = Math.max($(this).height(), maxHeight);
        });
        // Now, assign that height to ALL of the boxes.
        $('.box').css('height', maxHeight);
    }

    // watch the resize event, and call the setHeights function
    $(window).on('resize', function() {
        setHeights();
    });

    // Cause the heights to be adjusted on initial load
    setHeights();
});

一旦您完全了解该代码，您就可以查看更流畅/更奇特的方法来获得最大高度，例如此方法:https://stackoverflow.com/a/6061029/870729

关于javascript - 我必须添加什么样的脚本才能使框自动对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34548480/

25 4 0
文章推荐： c# - Bootstrap 开关高度在回发后自动改变
文章推荐： c++ - std::mem_fun 表达式的可移植性
文章推荐： c++ - 使用 Visual Studio 2005 在 C++ 中绘图
文章推荐： javascript - jQuery 在全身而不是 DIV 上平滑滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com