如何使滑块100％进入页面

时间：2017-01-16 14:48:54

标签： javascript jquery html css responsive

我整个上午一直在玩这个代码试图让这个滑块100％的浏览器。如果有帮助，我使用swiper滑块？我已在下面附上我的代码供参考。

如果您在全宽视图中预览代码，滑块似乎被捕获在原始图像大小中，而不像其他故事一样进入窗口边缘。任何建议都会被暗示。

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
		initialSlide: 0,
		slidesPerView: 1,
        spaceBetween: 20,
        centeredSlides: true,
        autoplay: 2000,
        autoplayDisableOnInteraction: false
    });
/* Making Thing Pretty
---------------------------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.opencanvascontainer {
	margin: 0 auto;
	max-width: 1140px;
}
[class*=bit-] {
	float: left;/*padding:.3em;*/
	position:relative;
}


/* OBSW Grid System
---------------------------- */
.box {
	text-align: center;
	border: solid 1px black;
	color: #000;
	font-size: 12px;
	font-family: 'proxima_nova_rgregular', sans-serif;
	padding: 15px 10px 15px 10px;
}
.bit-1 {
	width: 100%;
}
.bit-2 {
	width: 50%;
	padding: 20px;
}
.bit-3 {
	width: 33.33333%;
	padding: 20px;
}
.bit-4 {
	width: 25%;
}
.bit-4-tabs {
	width: 25%;
	padding:10px;
}
.bit-5 {
	width: 20%;
}
.bit-5-tabs {
	width: 20%;
	padding:10px;
}
.bit-6 {
	width: 16.66667%;
	padding: .3em;
}
.bit-7 {
	width: 14.28571%;
}
.bit-8 {
	width: 12.5%;
}
.bit-9 {
	width: 11.11111%;
}
.bit-10 {
	width: 10%;
}
.bit-11 {
	width: 9.09091%;
}
.bit-12 {
	width: 8.33333%;
}
.bit-25 {
	width: 25%;
}
.bit-40 {
	width: 40%;
}
.bit-60 {
	width: 60%;
}
.bit-75 {
	width: 75%;
}
.bit-35 {
	width: 35%;
	padding: 20px;
}
.bit-65 {
	width: 65%;
	padding: 20px;
}

/* Laptop */
@media (min-width:50em) and (max-width:68.75em) {
.bit-7 {
	width: 100%;
}
.bit-10, .bit-12, .bit-4, .bit-8 {
	width: 50%;
}
}

/* Tablet */
@media (min-width:30em) and (max-width:50em) {
.bit-10, .bit-12, .bit-4, .bit-6, .bit-8 {
	width: 50%;
}
.bit-1, .bit-11, .bit-3, .bit-5, .bit-7, .bit-9 {
	width: 100%;
}
}

/* Mobile */
@media (max-width:30em) {
.bit-1, .bit-10, .bit-11, .bit-12, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6, .bit-7, .bit-8, .bit-9, .bit-35, .bit-65 {
	width: 100%;
	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
}
.bit-5-tabs, .bit-4-tabs {width:50%;padding:5px;}
.storytext {margin-left:15px;}
.storytextcenter {margin-left:0px;}
.bottomlinespacing {margin-bottom:20px;}
.subtitle {
  font-size:20px !important;
  margin-top: 1em !important;
}
.fancy span { margin-top:1.5em !important;}
}
/* -------------------------
End OBSW Grid System */



/* Full Width Wrapper
---------------------------- */
.fullwidthwrapper {
	width: 100%;
	padding-top: 150px;
}

@media (max-width:991px) {
.fullwidthwrapper {
	padding-top: 5px;
}
}

@media (max-width:907px) {
.fullwidthwrapper {
	padding-top: 5px;
	line-height: 42px;
}
}
/* -------------------------
End Full Width Wrapper */



/* Header Slider
---------------------------- */
.hpfullwidth-top {
	background-color: #fff;
	background-repeat: repeat;
	padding-top: 150px;
}

@media (max-width:991px) {
.hpfullwidth-top {
	padding-top: 5px;
}
}
.imageholder {
	max-width: 1500px;
	margin: 0 auto;
}
/* -------------------------
End Header Slider */



/* Image Hover
---------------------------- */
.fade {
	opacity: 1;
	transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
}
fade:hover {
	opacity: 0.5;
}
/* -------------------------
End Image Hover */



.storytext {
	margin-top:15px;
	line-height:20px;
}
.storytextcenter {
	margin-top:15px;
	line-height:20px;
}
.firstline {
	font-family:proxima_nova_rgbold, serif;
	font-size:20px;
	color:#000;
}
.secondline {
	font-family:'proxima_nova_rgregular', serif;
	font-size:14px;
	color:#000;
}
.thirdline {
	font-family:proxima_nova_rgbold, serif;
	font-size:14px;
	color:#000;
	border-bottom: solid 2px #000000;
    display: inline;
    padding-bottom: 2px;
}

.bottomlinespacing {
	margin-bottom:0px;
}

.subtitle {
  margin: 1.5em 0 .3em 0;
  font-size:35px;
  letter-spacing:5px;
}
.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid black;
  top: 0;
  width: 600px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

.tabbedcontainer {
  width: 100%;
  margin: 0 auto;
}

ul.tabs {
  margin-top: 1em;
  padding: 0px;
  list-style: none;
  text-align:center;
}

ul.tabs li {
  background: none;
  color: #000;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

ul.tabs li.current {
  background: #fff;
  color: #000;
  text-decoration:underline;
  font-family:proxima_nova_rgbold, serif;
  font-weight:bold;
}

.tab-content {
  display: none;
  background: #fff;
}

.tab-content.current {
  display: inherit;
}



.swiper-container {
	width: 100%;
	height: auto;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* 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;
}
.swiper-container {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	/* Fix of Webkit flickering */
	z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
	float: left;
}
.swiper-container-vertical > .swiper-wrapper {
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.swiper-wrapper {
	position: relative;
	width: 100%;
	z-index: 1;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
	-webkit-transform: translate3d(0px, 0, 0);
	-moz-transform: translate3d(0px, 0, 0);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate3d(0px, 0, 0);
	transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	-webkit-flex-shrink: 0;
	-ms-flex: 0 0 auto;
	flex-shrink: 0;
	width: 100%;
	position: relative;
}
/* Auto Height */
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
	height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
	-webkit-box-align: start;
	-ms-flex-align: start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-webkit-transition-property: -webkit-transform, height;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform, height;
}
/* Pagination Styles */
.swiper-pagination {
	position: relative;
	text-align: center;
	-webkit-transition: 300ms;
	-moz-transition: 300ms;
	-o-transition: 300ms;
	transition: 300ms;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
	opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
	bottom: 0;
	margin-top: 5px;
	left: 0;
	width: 100%;
}
/* Bullets */
.swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #000;
	opacity: 0.2;
	margin: 5px;
}
button.swiper-pagination-bullet {
	border: none;
	margin: 0;
	padding: 0;
	box-shadow: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
	cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
	background: #fff;
}
.swiper-pagination-bullet-active {
	opacity: 1;
	background: black;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
	background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
	background: black;
	opacity: 1;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 5px;
}
/* Preloader */
.swiper-lazy-preloader {
	width: 42px;
	height: 42px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -21px;
	margin-top: -21px;
	z-index: 10;
	-webkit-transform-origin: 50%;
	-moz-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
	-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
	animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-position: 50%;
	-webkit-background-size: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
 100% {
 -webkit-transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
 100% {
 transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>

<!-- Start Body Content -->
<div class="fullwidthwrapper">


<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- SLIDE 1 -->
    <div class="swiper-slide" data-swiper-autoplay="2000">
    <picture>
        <source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
        <source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
        <!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
    <!-- END -->
    <!-- SLIDE 2 -->
    <div class="swiper-slide" data-swiper-autoplay="2000">
    <picture>
        <source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
        <source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
        <!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
    <!-- END -->
    <!-- SLIDE 2 -->
    <div class="swiper-slide" data-swiper-autoplay="2000">
    <picture>
        <source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
        <source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
        <!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
    <!-- END -->
   
  </div>
  <div class="heightissue" style="height:18px; width:100%;">&nbsp;</div>
</div>
<div class="swiper-pagination">&nbsp;</div>

  
  <div class="bit-1">
  <div class="bit-3">
  <img src="https://s17.postimg.org/lfnazyidb/nike1.jpg" width="100%">
  <div class="storytext">
  <span class="firstline">SHOP RUNNING</span><br>
  <span class="secondline">Starting at $59.99</span>
  <div class="bottomlinespacing"><span class="thirdline">SHOP NOW</span></div>
  </div>
  </div>
  
  <div class="bit-3">
  <img src="https://s17.postimg.org/b4ay7aqnz/nike2.jpg" width="100%">
  <div class="storytext">
  <span class="firstline">SHOP TRAINING</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
  </div>
  
  <div class="bit-3">
  <img src="https://s17.postimg.org/qoibxu0sf/nike3.jpg" width="100%">
  <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
  </div>
  </div>
  
  <div class="bit-1" style="background-color:#ebebeb; padding-top:20px; padding-bottom:20px;">
  <div class="imageholder">
  <div class="bit-2">
  <img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
  <div class="storytext">
  <span class="firstline">WOMEN'S ATHLETIC</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
  </div>
  <div class="bit-2">
  <img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
  <div class="storytext">
  <span class="firstline">MEN'S ATHLETIC</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
  </div>
  </div>
  </div>
  
  <div class="bit-1" style="margin-bottom:40px;">
  <p class="subtitle fancy"><span>ATHLETIC<font style="font-family:proxima_nova_rgbold, serif;">REPORT</font>2017</span></p>
  <div class="tabbedcontainer">

  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Women's</li>
    <li class="tab-link" data-tab="tab-2">Men's</li>
    <li class="tab-link" data-tab="tab-3">Girls'</li>
    <li class="tab-link" data-tab="tab-4">Boys'</li>
  </ul>

  <div id="tab-1" class="tab-content current">
    <div class="bit-4-tabs">
    <img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
  </div>
  <div id="tab-2" class="tab-content">
    <div class="bit-4-tabs">
    <img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
  </div>
  <div id="tab-3" class="tab-content">
    <div class="bit-4-tabs">
    <img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
  </div>
  <div id="tab-4" class="tab-content">
    <div class="bit-4-tabs">
    <img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
    <div class="bit-4-tabs">
    <img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
    <div class="storytext">
  <span class="firstline">SHOP SNEAKERS</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
    </div>
  </div>

</div>
  </div>
  
   <div class="bit-1" style="background-color:#ebebeb; padding-top:20px; padding-bottom:20px;">
  <div class="imageholder">
  <div class="bit-2">
  <img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
  <div class="storytext">
  <span class="firstline">WOMEN'S ATHLETIC</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
  </div>
  <div class="bit-2">
  <img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
  <div class="storytext">
  <span class="firstline">MEN'S ATHLETIC</span><br>
  <span class="secondline">Starting at $59.99</span><br>
  <span class="thirdline">SHOP NOW</span>
  </div>
  </div>
  </div>
  </div>
  
</div>
<!-- End Body Content -->

谢谢！

1 个答案:

答案 0 :(得分：1)

从“bit-3”类中删除填充。

相关问题
最新问题