神武手游宠物打书模拟器

关注

VIP免费原创最新推荐文章于 2026-01-20 10:50:25 发布 6.8k 阅读 AI 写同款· GEO 优化 ›

CSS 弹性盒布局：flex-wrap 换行与多行交叉轴对齐默认情况下，弹性容器（flex container）会把所有子项（flex item）挤在一行里，哪怕空间不够也只会压缩子项，而不会换行。浏览器会依次把子项放进当前行，当剩余空间不足以容纳下一个子项的基础尺寸时，就开启新的一行。一旦允许换行，容器里就会出现多条「弹性行（flex line）」，此时交叉轴对齐的行为也会从「单行对齐」变成「多行对齐」，是默认值：当子项没有设置固定高度时，行会被拉伸，子项随之变高，看起来像是「撑满了容器」。上面这段代码中，每个子项固定 200px 宽，容器宽度决定每行能放几个。阅读详情

实现方式

HTML + Javascript

实现效果

在这里插入图片描述

实现过程

准备图片文件和bootstrap

png 文件夹 - >
编写代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>打书模拟器</title>
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="bootstrap/jquery-1.9.1.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
	<style type="text/css">

		body{
    
    
			margin: 0 auto;
			padding: 0;
			width: 1000px;
			height: 100%;
			background: url("png/background.png") no-repeat;
			background-size: 100%;
		}

		#window
		{
    
    
			width: 100%;
			height: 800px;
			
		}

		#pets_info
		{
    
    
			
			margin-top: 2px;
			margin-left: 1px;
			width: 450px;
			height: 400px;
		}

		#pets_books
		{
    
    
			margin-left: 1px;
			
			width: 450px;
			height: 360px;
			background: #A2D5FD;
		}

		#Squares
		{
    
    
			text-align: center;
		}

		#Squares div
		{
    
    
			display: inline-block;
			border: 3px solid #6196DA;
			border-radius: 8px;
			width: 90px;
			height: 90px;
			margin-right:8px;
			margin-top: 1px;
			background: #4C76AD;
			overflow: hidden;
		}

		#Books
		{
    
    
			width: 550px;
			position: absolute;
			float: left;
			height: 760px;
			
			left: 710px;
			top: 2px;
			background: #A2D5FD;
			overflow-y:auto;
		}

		#Books div[name='pic']
		{
    
    
			display: inline-block;
			
			width: 90px;
			height: 110px;
			margin-left:35px;
			margin-top: 20px;
			text-align: center;
			overflow: hidden;