Question

我正在尝试动态显示方框，这样无论显示多少个方框或屏幕大小，它们都会占用整个屏幕。

目前，前几个方框很小，最后一个方框长大，以填补该空间。如何确保所有的boxresize始终填满整个屏幕，并且所有的大小始终相同。

我尝试过使用太空，伸展，中心...我缺少什么？确保你在firefox或chrome中查看代码..干杯。

＆＃13;

.siteBox
{
	border: 1px solid black;
	display: inline-block;
	margin: 10px;
	padding: 10px;
	flex: 1;
	

}
.siteBoxHolder
{
	margin: 20px;
	display:flex;
	flex-flow: row wrap;
	justify-content: center;

	
}
.siteBoxImage
{
	width: 100%;
}
.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 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以始终填充屏幕（Flexbox）

0 个答案: