Question

所以我希望有人可以指出我在这里正确的方向，基本上我想做到这一点，所以盒子将调整自己，以便始终能够显示所有的框，而不会让用户向下滚动。所以不管它们的重新设置它总是整齐地显示所有盒子，我打算添加一个按钮，允许将另一个sitebox添加到siteBoxHolder中，因此它需要是动态的，并且总是适合一个屏幕而不滚动是否可行？

目前我已将框设置为屏幕的百分比，但我认为我可能需要使用js来获取div的数量，然后使用除法？但由于我需要它们间隔均匀，我不确定最好的方法是什么。我觉得我应该只能用css来实现这个目标。

这是我到目前为止所拥有的...... https://jsfiddle.net/50bLsc3a/

希望有人可以提供帮助。感谢。

代码：

.siteBox
{
	border: 1px solid black;
	display: inline-block;
	padding: 10px;
	width: 20%;
	margin: 1.7%;
}
HTML, BODY
{
	width: 100%;
	height: 100%;
}
.siteBoxHolder
{
	margin: 20px;
}
.siteBoxImage
{
	width: 90%;
}
.siteTitle
{
	text-align: center;
}

<body>

	<div class="siteBoxHolder">
        

		<div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

		

		

	</div>
	

</body>

Answer 1

用简单的弹性盒解决它......感谢@ Vinc199789

＆＃13;

.siteBox
{
	border: 1px solid black;
	display: inline-block;
	padding: 10px;
	width: 20%;
	margin: 1.7%;
}
.siteBoxHolder
{
	margin: 20px;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.siteBoxImage
{
	width: 90%;
}
.siteTitle
{
	text-align: center;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" href="css/style.css" />
	<title>Custom Homepage</title>
</head>
<body>

	<div class="siteBoxHolder">
        

		<div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

       <div class="siteBox">
            

			<a href="" target="_blank"><img src="" class="siteBoxImage"></a>
                
			<h1 class="siteTitle">Title</h1>

       </div>

		

		

	</div>
	

</body>

</html>

＆＃13;

如何根据显示的div数量来调整div的大小？

1 个答案: