让我说一下我不是很熟练,也不知道很多好的做法,我正在学习项目的实施.
我正在使用Swiper作为游戏列表滑块,但当它放入另一个Div时它就会消失.我可以在Div之外正确定位和调整大小,但我不能让它以这种方式响应并且它非常无组织.
下面是该部分,左侧是时间表,右侧是游戏滑块.在游戏区外面会显示,但是当它在Div内部时它完全消失了.
<!-- Start of schedule container -->
<div id="info-wrapper">
<section id="info">
<div id="schedule" class="container">
<div class="row">
<div class="col">
<h1 id="title"> Stream Schedule</h1>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Mondays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Tuesdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Wednesdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Thursdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Fridays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
</div>
<!-- Container for game list -->
<div id="games" class="container">
<h1 id="title"> What I've been playing </h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</section>
主样式表下面的完整CSS. Swiper的所有其他款式均可在http://idangero.us/swiper/找到
body, html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
color: #fff;
font-size: 100%;
line-height: 1.25em;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: inherit;
}
.clear:after, .clear:before, .container:after, .container:before {
content: "";
display: table;
}
.clear:after, .container:after {
clear: both;
}
.clear, .container {
zoom: 1;
}
#header ul #nav li a:hover, .accent, .btn:hover {
background: #rgba(62, 24, 82, 1);
color: #fff;
}
.forum {
padding: 3px 8px 4px 8px !important;
}
.btn:hover {
border-color: #6246a3;
}
.container {
padding: 0 3%;
}
#header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 40px 35px;
}
#header #displayname {
margin: 0;
padding: 0;
font-size: 137%;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.label {
font-family: Arial, sans-serif;
font-size: 54%;
letter-spacing: 1px;
padding: 0 8px;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
white-space: nowrap;
vertical-align: middle;
font-weight: 700;
margin-top: -4px;
display: inline-block;
}
#header ul#nav {
margin: 2px 0 0;
padding: 0;
}
#header ul#nav li {
display: inline-block;
list-style: none;
font-size: 120%;
}
#header ul#nav li a {
padding: 3px 8px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
transition: background .3s ease;
outline: none;
}
#content {
box-sizing: border-box;
padding: 132px 0;
width: 100%;
height: 100%;
display: table;
text-align: center;
background: rgba(0, 0, 0, .7);
}
#content .container {
display: table-cell;
vertical-align: middle;
}
.avatar {
border-radius: 50%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom: 25px;
width: 145px;
height: 145px;
}
.name {
color: #eee;
font-size: 104%;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 7px;
line-height: 1.5em;
}
.status {
font-size: 220%;
line-height: 1.3em;
font-weight: 300;
letter-spacing: 0;
margin: 0 0 20px;
}
.btn {
padding: 15px 24px;
border: 1px solid #FFF;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
font-size: 100%;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
white-space: nowrap;
vertical-align: middle;
display: inline-block;
transition: background ease .3s;
}
.live {
background: rgba(62, 24, 82, 1);
border: none;
-webkit-animation: pulse 2s infinite;
-moz-animation: pulse 2s infinite;
-o-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
.label .live-status {
font-size: 20px;
line-height: 19px;
vertical-align: middle;
margin-right: 3px;
}
#footer {
position: absolute;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 14px 30px;
}
#footer p {
font-size: 80%;
color: #FFF;
font-weight: 600;
opacity: .4;
transition: opacity ease .3s;
line-height: 1em;
}
#footer p:hover {
opacity: .8;
}
#footer .left {
float: left;
}
#footer .right {
float: right;
}
@media (min-width: 801px) {
#header #displayname {
float: left;
}
#header ul#nav {
float: right;
}
#header ul#nav li {
margin-left: 21px;
}
}
@media (max-width: 800px) {
#header {
padding: 24px 20px 20px;
}
#header #displayname {
text-align: center;
}
#header ul#nav {
margin: 20px auto 0;
text-align: center;
}
#header ul#nav li {
margin: 0 4px 12px;
}
}
@media (max-width: 750px) {
.name {
font-size: 100%;
}
.status {
font-size: 200%;
}
.btn {
width: 80%;
}
.avatar {
width: 120px;
height: 120px;
}
#footer p {
font-size: 60%;
padding: 0px 0px;
}
.accent, .btn:hover, #header ul#nav li a:hover {
background: #330066;
}
.btn:hover {
border-color: #330066;
}
.live {
background: #330066;
border: none;
}
@-webkit-keyframes pulse {
from {
opacity: 1.0;
-webkit-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-webkit-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-webkit-box-shadow: 0 0 15px #330066;
}
}
@-moz-keyframes pulse {
from {
opacity: 1.0;
-moz-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-moz-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-moz-box-shadow: 0 0 15px #330066;
}
}
@-o-keyframes pulse {
from {
opacity: 1.0;
-o-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-o-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-o-box-shadow: 0 0 15px #330066;
}
}
@keyframes pulse {
from {
opacity: 1.0;
box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
box-shadow: 0 0 15px #330066;
}
}
}
#content {
background: rgba(0, 0, 0, .8)
}
#live {
background: url("http://www.tokkoro.com/picsup/2860789-batman-the-dark-knight-joker-messenjahmatt___movie-wallpapers.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
#info-wrapper {
background: url("../img/cell.jpg") no-repeat center center;
}
#info {
height: 60vh;
width: 100%;
padding: 0;
margin: 0;
background-color: rgba(39, 0, 59, .8);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#schedule {
background-color: rgba(0, 0, 0, .4);
display: inline-flex;
flex-direction: column;
width: 30vh;
height: auto;
float: left;
}
#dates {
font-size: 80%;
}
#dates .p {
font-size: 100%;
}
/* Games Section Wrapper */
.swiper-container {
width: 50%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#title {
color: #fff;
font-size: 150%;
font-weight: 600;
letter-spacing: 2px;
}
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
/* Pulse Animations Min */
@-webkit-keyframes pulse {
from {
opacity: 1;
-webkit-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-webkit-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-webkit-box-shadow: 0 0 12px #6246a3;
}
}
@-moz-keyframes pulse {
from {
opacity: 1;
-moz-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-moz-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-moz-box-shadow: 0 0 12px #6246a3;
}
}
@-o-keyframes pulse {
from {
opacity: 1;
-o-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-o-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-o-box-shadow: 0 0 12px #6246a3;
}
}
@keyframes pulse {
from {
opacity: 1;
box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
box-shadow: 0 0 12px #6246a3;
}
}
/* Querying additional screen sizes. */
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
如果我在这里缺少更多信息,请告诉我,我会更新！用这个抓我的头,所以提前感谢您的帮助！
最佳答案 添加CSS：
#games{
height: 100%;
}
