为什么要设置宽度为9999px?

来源：4-3 自动切换效果代码分析

qq_鸭绿桥第一帅哥_0

2019-03-26 17:21:57

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>yidong</title>
    <link rel="stylesheet" type="text/css" href="css/yidong.css">
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
</head>

<body>
    <div class="app">
        <div class="box">
            <div class="header">
                <a href="#" class="header_address">北京</a>
                <a href="#" class="header_form">
                    <input type="text">
                </a>
                <a href="#" class="header_message">
                    <i class="fa fa-comment-o fa-lg"></i>
                </a>
            </div>
            <div class="banner">
                <div class="inner">
                    <div class="innerwraper"><img src="img/banner1.jpg" alt=""></div>
                    <div class="innerwraper"><img src="img/banner2.jpg" alt=""></div>
                    <div class="innerwraper"><img src="img/banner3.jpg" alt=""></div>
                    <div class="innerwraper"><img src="img/banner4.jpg" alt=""></div>
                    <div class="innerwraper"><img src="img/banner1.jpg" alt=""></div>
                </div>
                <div class="pagination">
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footericon iconactive">
                <a class="icon_a">
                    <i class="fa fa-camera-retro fa-lg"></i>
                </a>
                我的
            </div>
            <div class="footericon">
                <a class="icon_a">
                    <i class="fa fa-camera fa-lg"></i>
                </a>
                相机
            </div>
            <div class="footericon">
                <a class="icon_a">
                    <i class="fa fa-calendar fa-lg"></i>
                </a>
                日历
            </div>
            <div class="footericon">
                <a class="icon_a">
                    <i class="fa fa-envelope-open fa-lg"></i>
                </a>
                信息
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/yidong.js"></script>
</body>

</html>


*{
	margin: 0;
	padding: 0;
	list-style: none;
}
a{
	text-decoration: none;
}
body{
	font-size: 14px;
}
.footer{
	display: flex;
	position: fixed;
	bottom: 0;
	height: 54px;
	border-top: 1px solid #ccc;
	background: #fff;
	font-size: 12px;
	width: 100%;
	text-align: center;
}
/* .footer i{
	width: 30px;
	display: block;
	height: 30px;
} */
.footericon{
	flex: 1;
	margin: 8px auto;
}
.iconactive{
	color: red;
}

.icon_a{
	display: block;
}
.box{
	width: 6.4rem;
	margin: 0 auto;
}
.header{
	height: 44px;
	padding: 0 15px;
	background: red;
	display: flex;
	align-items: center;
}
.header_address{
	color: white;
	margin-right: 10px;
}
.header_message{
	color: white;
	margin-left: 10px;
}
.header_form{
flex: 1;
}
.header_form input{
	width: 100%;
	height: 28px;
	border: none;
	border-radius: 8px;
	box-sizing: border-box;
}
.banner{
	/* overflow: hidden; */
	position: relative;
	height: 2.6rem;
	width: 6.4rem;
	/* background: #666; */
}
.inner{
	position: relative;
	width: 9999px;/* 为什么 ???*/
	left: 0;
	top: 0;
}
.innerwraper{
	width: 6.4rem;
	float: left;
}
.innerwraper img{
	width: 100%;
	height: 2.6rem;
}
.pagination{
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
}
.pagination span{
	display: inline-block;
	width: .16rem;
	height: .16rem;
	background-color: #9aa499;
	border-radius: 50%;
	cursor: pointer;
}
.pagination .active{
	background-color: #fff;
}

写回答

1回答