我有一个Flickity滑块，它使用display：table; 所以当浏览器缩小时，它仍会显示veiwport div中的所有内容。我的问题是当页面加载时它显示veiwport div中的所有单元格，直到页面完全加载。我可以删除表并使用overflow：hidden;修复它，但是当浏览器收缩时，内容被剪裁。我怎么能同时使用？并且当它加载时，其他单元格被隐藏，当浏览器收缩时它仍会扩展div？
/* ADDITIONAL SERVICES */
#additional_services{border: px solid purple;
width:100%;
overflow:hidden;
display:table;
background-color:#FFF;
}
/*! Flickity v1.2.1
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus {
outline: none;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-color:#FFF;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display:table;
}
.carousel-cell {
border: px solid red;
padding-top:5px;
display:table;
width: 100%;
height: 240px;
padding: 0;
margin: 0;
display:table;
margin-top:10px;
margin-bottom:10px;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
padding: 0;
margin: 0;
line-height: 200px;
font-size: 80px;
color: white;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: white;
background: hsla(0, 0%, 100%, 0.75);
cursor: pointer;
/* vertically center */
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.flickity-prev-next-button:hover { background: white; }
.flickity-prev-next-button:focus {
outline: none;
box-shadow: 0 0 0 5px #09F;
}
.flickity-prev-next-button:active {
filter: alpha(opacity=60); /* IE8 */
opacity: 0.6;
}
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button:disabled {
filter: alpha(opacity=30); /* IE8 */
opacity: 0.3;
cursor: auto;
}
.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow {
fill: #333;
}
/* color & size if no SVG - IE8 and Android 2.3 */
.flickity-prev-next-button.no-svg {
color: #333;
font-size: 26px;
}
/* ---- page dots ---- */
.flickity-page-dots {
1position: absolute;
display:none;
width: 100%;
bottom: 10px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
filter: alpha(opacity=25); /* IE8 */
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
filter: alpha(opacity=100); /* IE8 */
opacity: 1;
}
.cell_left{
float:left;
width:35%;
height:90%;
padding-top:5px;
padding-bottom:5px;
margin-left:5%;
display:table;
position: relative;
}
.cell_right{
float:right;
width:35%;
height:80%;
margin-right:5%;
display:table;
position: relative;
padding-top:5px;
padding-bottom:5px;
}
.cell_head{
width:100%;
font-weight:bold;
text-transform:uppercase;
padding-bottom:5%;
display:table;
}
.cell_review{
width:100%;
display:table;
}
.cell_sig{
width:97%;
padding-left:3%;
padding-top:5%;
font-weight:bold;
text-transform:uppercase;
display:table;
}
/* gallery pics */
#ourwork_gallery{
background-color:#f0f0f0;
width:100%;
height:350px;
display:table;
padding-bottom:10px;
}
.gallery_header{
width:100%;
font-size:20px;
font-weight:bold;
border:px solid green;
text-align:center;
margin: 5% 0 5% 0;
}
.gallery_pics_holder{border:px solid green;
width:100%;text-align:center;height:350px;
display:table;
}
.gallery_pics{
display:inline-block;
width:300px;
height:300px;
margin:10px;
text-align:center;
}
.gallery_pics img{
width: 100%;
height: 100%;
}
.gallery_pics:hover{
cursor:pointer;
}
.gallery_pics.fullscreen{
z-index: 9999;
position: fixed;
margin: 0 auto;
width: 95%;
height: 95%;
top: 2%;
left: 3%;
background-color:#000;
}
.gallery_pics.fullscreen img{
max-width: 90%;
max-height: 90%;
width: auto;
height: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}<!DOCTYPE html>
<html lang="en" class="no-js">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<head>
<meta charset="utf-8">
<link rel="SHORTCUT ICON" href="images/favicon.ico"/>
<title>yyy</title>
<meta property="og:description" content="Your description" />
<link rel="stylesheet" href="css/ourwork.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#navmenu").click(function(){
$("#menu").toggle();
});
});
</script>
<script>
$(window).load(function() {
$("body").removeClass("preload");
});
</script>
</head>
<body class="preload">
<div id="additional_services">
<div class="carousel js-flickity" data-flickity-options='{ "autoPlay": true,"wrapAround": true }'>
<!----------------------------------------------------------------carouselcell---------------------------------------------------------------->
<div class="carousel-cell"> <div class="cell_left">
<div class="cell_head"></div><!--cell_head-->
<div class="cell_review">ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
</div><!--cell_review-->
<div class="cell_sig">Michael W.</div><!--cell_sig-->
</div><!--cell_left-->
<div class="cell_right">
<div class="cell_head"></div><!--cell_head-->
<div class="cell_review">ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
</div><!--cell_review-->
<div class="cell_sig">Wesley Adkins</div><!--cell_sig-->
</div><!--cell_right--></div>
<!----------------------------------------------------------------carouselcell---------------------------------------------------------------->
<div class="carousel-cell"> <div class="cell_left">
<div class="cell_head"></div><!--cell_head-->
<div class="cell_review">ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
</div><!--cell_review-->
<div class="cell_sig">Theo Dotson</div><!--cell_sig-->
</div><!--cell_left-->
<div class="cell_right">
<div class="cell_head"></div><!--cell_head-->
<div class="cell_review">ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
</div><!--cell_sig-->
<div class="cell_sig">Theo Dotson</div><!--cell_sig-->
</div><!--cell_right--></div>
<!----------------------------------------------------------------carouselcell---------------------------------------------------------------->
<div class="carousel-cell"> <div class="cell_left">
<div class="cell_head"></div><!--cell_head-->
<div class="cell_review">ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
</div><!--cell_review-->
<div class="cell_sig">Kev Giff</div><!--cell_sig-->
</div><!--cell_left-->
<div class="cell_right">
<div class="cell_head"></div><!--cell_head-->
<div class="cell_review">ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
</div><!--cell_review-->
<div class="cell_sig">Kathleen Griffith</div><!--cell_sig-->
</div><!--cell_right--></div>
</div>
</div><!--additional_services-->
<!----------------------------------------------------------------SEC2---------------------------------------------------------------->
<div id="ourwork_gallery">
<div class="gallery_header">Our work speaks for itself!</div><!--gallery_header-->
<div class="gallery_pics_holder">
<div class="gallery_pics"><img src="images/before1.jpg" width="300px" height="300px" alt="image coming soon"></div>
<!--gallery_header-->
<div class="gallery_pics"><img src="images/after1.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/before2.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/after2.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/before3.jpg" width="300px" height="300px" alt="Ohio Discount Auto Glass"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/after3.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/before4.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/after4.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/before5.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/after5.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/before6.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/after6.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/before7.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/after7.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/before8.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/after8.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/before9.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/after9.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/before10.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
<div class="gallery_pics"><img src="images/after10.jpg" width="300px" height="300px" alt="image coming soon"></div><!--gallery_header-->
</div><!--gallery_pics-->
</div><!--ourwork_gallery-->
<!----------------------------------------------------------------/SEC2---------------------------------------------------------------->
<?php
include_once "inc/footer.php";
?>
<script src="js/flickity.pkgd.js"></script>
</body>
</html>