die Lücke zwischen zwei divs ändern

Question

ich diesen erstaunlichen Artikel nur bemerkt auf Artikel Article from codrops slider: Die Demo

hier Demo of the article "How to Create a Simple Multi-Item Slider" zur Verfügung ich nur machen einige wenige Änderungen, die gleiche Sache auf meiner Website implementieren möchten.

Die Anzeige der Elemente aus drei Netz Datei besteht:

HTML

\t \t <div class="container"> \t 
 
\t \t \t <header> 
 
\t \t \t \t <h1>Simple Multi-Item Slider <span>Category slider with CSS animations</span></h1> 
 
\t \t \t </header> 
 
\t \t \t <div class="main"> 
 
\t \t \t \t <div id="mi-slider" class="mi-slider"> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Boots</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafers</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Belts</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hats &amp; Caps</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scarves</h4></a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Casual</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li> 
 
\t \t \t \t \t \t <li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t \t <nav> 
 
\t \t \t \t \t \t <a href="#">Shoes</a> 
 
\t \t \t \t \t \t <a href="#">Accessories</a> 
 
\t \t \t \t \t \t <a href="#">Watches</a> 
 
\t \t \t \t \t \t <a href="#">Bags</a> 
 
\t \t \t \t \t </nav> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div><!-- /container --> 
 
\t \t

erste CSS-Datei (demo.css)

/* General Demo Style */ 
 
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900); 
 

 
html { height: 100%; } 
 

 
*, 
 
*:after, 
 
*:before { 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 
 
.clearfix:before, 
 
.clearfix:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 

 
.clearfix:after { 
 
    clear: both; 
 
} 
 

 
.clearfix { 
 
    *zoom: 1; 
 
} 
 

 
body { 
 
    font-family: 'Lato', Calibri, Arial, sans-serif; 
 
    background: #fff; 
 
    font-weight: 400; 
 
    font-size: 15px; 
 
    color: #333; 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
} 
 

 
a { 
 
\t color: #555; 
 
\t text-decoration: none; 
 
} 
 

 
.container { 
 
\t width: 100%; 
 
\t position: relative; 
 
} 
 

 
.container > header { 
 
\t width: 90%; 
 
\t max-width: 1240px; 
 
\t margin: 0 auto; 
 
\t position: relative; 
 
\t padding: 30px; 
 
} 
 

 
.main { 
 
\t padding-bottom: 80px; 
 
} 
 

 
.container > header h1 { 
 
\t font-size: 34px; 
 
\t line-height: 38px; 
 
\t margin: 0; 
 
\t font-weight: 700; 
 
\t color: #333; 
 
\t float: left; 
 
} 
 

 
.container > header h1 span { 
 
\t display: block; 
 
\t font-size: 20px; 
 
\t line-height: 26px; 
 
\t font-weight: 300; 
 
} 
 

 
/* Header Style */ 
 
.codrops-top { 
 
\t line-height: 24px; 
 
\t font-size: 11px; 
 
\t background: #fff; 
 
\t background: rgba(255, 255, 255, 0.5); 
 
\t text-transform: uppercase; 
 
\t z-index: 9999; 
 
\t position: relative; 
 
\t box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 
 
} 
 

 
.codrops-top a { 
 
\t padding: 0px 10px; 
 
\t letter-spacing: 1px; 
 
\t color: #333; 
 
\t display: inline-block; 
 
} 
 

 
.codrops-top a:hover { 
 
\t background: rgba(255,255,255,0.8); 
 
\t color: #000; 
 
} 
 

 
.codrops-top span.right { 
 
\t float: right; 
 
} 
 

 
.codrops-top span.right a { 
 
\t float: left; 
 
\t display: block; 
 
} 
 

 
/* Demo Buttons Style */ 
 
.codrops-demos { 
 
\t float: right; 
 
\t padding-top: 10px; 
 
} 
 

 
.codrops-demos a { 
 
    display: inline-block; 
 
    margin: 10px; 
 
    color: #666; 
 
    font-weight: 700; 
 
    line-height: 30px; 
 
    border-bottom: 4px solid transparent; 
 
} 
 

 
.codrops-demos a:hover { 
 
\t color: #000; 
 
\t border-color: #000; 
 
} 
 

 
.codrops-demos a.current-demo, 
 
.codrops-demos a.current-demo:hover { 
 
\t color: #aaa; 
 
\t border-color: #aaa; 
 
}

Zweite CSS-Datei (style.css)

@import url('demo.css'); 
 

 
.mi-slider { 
 
\t position: relative; 
 
\t margin-top: 30px; 
 
\t height: 490px; 
 
} 
 

 
.mi-slider ul { 
 
\t list-style-type: none; 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t left: 0; 
 
\t bottom: 140px; 
 
\t overflow: hidden; 
 
\t text-align: center; 
 
\t pointer-events: none; 
 
} 
 

 
.no-js .mi-slider ul { 
 
\t position: relative; 
 
\t left: auto; 
 
\t bottom: auto; 
 
\t margin: 0; 
 
\t overflow: visible; 
 
} 
 

 
.mi-slider ul.mi-current { 
 
\t pointer-events: auto; 
 
} 
 

 
.mi-slider ul li { 
 
\t display: inline-block; 
 
\t padding: 20px; 
 
\t width: 20%; 
 
\t max-width: 300px; 
 
\t -webkit-transform: translateX(600%); 
 
\t transform: translateX(600%); 
 
\t -webkit-transition: opacity 0.2s linear; 
 
\t transition: opacity 0.2s linear; 
 
} 
 

 
.no-js .mi-slider ul li { 
 
\t -webkit-transform: translateX(0); 
 
\t transform: translateX(0); 
 
} 
 

 
.mi-slider ul li a, 
 
.mi-slider ul li img { 
 
\t display: block; 
 
\t margin: 0 auto; 
 
} 
 

 
.mi-slider ul li a { 
 
\t outline: none; 
 
\t cursor: pointer; 
 
} 
 

 
.mi-slider ul li img { 
 
\t max-width: 100%; 
 
\t border: none; 
 
} 
 

 
.mi-slider ul li h4 { 
 
\t display: inline-block; 
 
\t font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; 
 
\t font-style: italic; 
 
\t font-weight: 400; 
 
\t font-size: 18px; 
 
\t padding: 20px 10px 0; 
 
} 
 

 
.mi-slider ul li:hover { 
 
\t opacity: 0.7; 
 
} 
 

 
.mi-slider nav { 
 
\t position: relative; 
 
\t top: 400px; 
 
\t text-align: center; 
 
\t max-width: 800px; 
 
\t margin: 0 auto; 
 
\t border-top: 5px solid #333; 
 
} 
 

 
.no-js nav { 
 
\t display: none; 
 
} 
 

 
.mi-slider nav a { 
 
\t display: inline-block; 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 5px; 
 
\t padding: 40px 30px 30px 34px; 
 
\t position: relative; 
 
\t color: #888; 
 
\t outline: none; 
 
\t -webkit-transition: color 0.2s linear; 
 
\t transition: color 0.2s linear; 
 
} 
 

 
.mi-slider nav a:hover, 
 
.mi-slider nav a.mi-selected { 
 
\t color: #000; 
 
} 
 

 
.mi-slider nav a.mi-selected:after, 
 
.mi-slider nav a.mi-selected:before { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t top: -5px; 
 
\t border: solid transparent; 
 
\t height: 0; 
 
\t width: 0; 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
} 
 

 
.mi-slider nav a.mi-selected:after { 
 
\t border-color: transparent; 
 
\t border-top-color: #fff; 
 
\t border-width: 20px; 
 
\t left: 50%; 
 
\t margin-left: -20px; 
 
} 
 

 
.mi-slider nav a.mi-selected:before { 
 
\t border-color: transparent; 
 
\t border-top-color: #333; 
 
\t border-width: 27px; 
 
\t left: 50%; 
 
\t margin-left: -27px; 
 
} 
 

 
/* Move classes and animations */ 
 

 
.mi-slider ul:first-child li, 
 
.no-js .mi-slider ul li { 
 
\t -webkit-animation: scaleUp 350ms ease-in-out both; 
 
\t animation: scaleUp 350ms ease-in-out both; 
 
} 
 

 
@-webkit-keyframes scaleUp { 
 
\t 0% { -webkit-transform: translateX(0) scale(0); } 
 
\t 100% { -webkit-transform: translateX(0) scale(1); } 
 
} 
 

 
@keyframes scaleUp { 
 
\t 0% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0); } 
 
\t 100% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); } 
 
} 
 

 
.mi-slider ul:first-child li:first-child { 
 
\t -webkit-animation-delay: 90ms; 
 
\t animation-delay: 90ms; 
 
} 
 

 
.mi-slider ul:first-child li:nth-child(2) { 
 
\t -webkit-animation-delay: 180ms; 
 
\t animation-delay: 180ms; 
 
} 
 

 
.mi-slider ul:first-child li:nth-child(3) { 
 
\t -webkit-animation-delay: 270ms; 
 
\t animation-delay: 270ms; 
 
} 
 

 
.mi-slider ul:first-child li:nth-child(4) { 
 
\t -webkit-animation-delay: 360ms; 
 
\t animation-delay: 360ms; 
 
} 
 

 
/* moveFromRight */ 
 

 
.mi-slider ul.mi-moveFromRight li { 
 
\t -webkit-animation: moveFromRight 350ms ease-in-out both; 
 
\t animation: moveFromRight 350ms ease-in-out both; 
 
} 
 

 
/* moveFromLeft */ 
 

 
.mi-slider ul.mi-moveFromLeft li { 
 
\t -webkit-animation: moveFromLeft 350ms ease-in-out both; 
 
\t animation: moveFromLeft 350ms ease-in-out both; 
 
} 
 

 
/* moveToRight */ 
 

 
.mi-slider ul.mi-moveToRight li { 
 
\t -webkit-animation: moveToRight 350ms ease-in-out both; 
 
\t animation: moveToRight 350ms ease-in-out both; 
 
} 
 

 
/* moveToLeft */ 
 

 
.mi-slider ul.mi-moveToLeft li { 
 
\t -webkit-animation: moveToLeft 350ms ease-in-out both; 
 
\t animation: moveToLeft 350ms ease-in-out both; 
 
} 
 

 
/* Animation Delays */ 
 

 
.mi-slider ul.mi-moveToLeft li:first-child, 
 
.mi-slider ul.mi-moveFromRight li:first-child, 
 
.mi-slider ul.mi-moveToRight li:nth-child(4), 
 
.mi-slider ul.mi-moveFromLeft li:nth-child(4) { 
 
\t -webkit-animation-delay: 0ms; 
 
\t animation-delay: 0ms; 
 
} 
 

 
.mi-slider ul.mi-moveToLeft li:nth-child(2), 
 
.mi-slider ul.mi-moveFromRight li:nth-child(2), 
 
.mi-slider ul.mi-moveToRight li:nth-child(3), 
 
.mi-slider ul.mi-moveFromLeft li:nth-child(3) { 
 
\t -webkit-animation-delay: 90ms; 
 
\t animation-delay: 90ms; 
 
} 
 

 
.mi-slider ul.mi-moveToLeft li:nth-child(3), 
 
.mi-slider ul.mi-moveFromRight li:nth-child(3), 
 
.mi-slider ul.mi-moveToRight li:nth-child(2), 
 
.mi-slider ul.mi-moveFromLeft li:nth-child(2) { 
 
\t -webkit-animation-delay: 180ms; 
 
\t animation-delay: 180ms; 
 
} 
 

 
.mi-slider ul.mi-moveToLeft li:nth-child(4), 
 
.mi-slider ul.mi-moveFromRight li:nth-child(4), 
 
.mi-slider ul.mi-moveToRight li:first-child, 
 
.mi-slider ul.mi-moveFromLeft li:first-child { 
 
\t -webkit-animation-delay: 270ms; 
 
\t animation-delay: 270ms; 
 
} 
 

 
/* Animations */ 
 

 
@-webkit-keyframes moveFromRight { 
 
\t 0% { -webkit-transform: translateX(600%); } 
 
\t 100% { -webkit-transform: translateX(0%); } 
 
} 
 

 
@-webkit-keyframes moveFromLeft { 
 
\t 0% { -webkit-transform: translateX(-600%); } 
 
\t 100% { -webkit-transform: translateX(0%); } 
 
} 
 

 
@-webkit-keyframes moveToRight { 
 
\t 0% { -webkit-transform: translateX(0%); } 
 
\t 100% { -webkit-transform: translateX(600%); } 
 
} 
 

 
@-webkit-keyframes moveToLeft { 
 
\t 0% { -webkit-transform: translateX(0%); } 
 
\t 100% { -webkit-transform: translateX(-600%); } 
 
} 
 

 
@keyframes moveFromRight { 
 
\t 0% { -webkit-transform: translateX(600%); transform: translateX(600%); } 
 
\t 100% { -webkit-transform: translateX(0); transform: translateX(0); } 
 
} 
 

 
@keyframes moveFromLeft { 
 
\t 0% { -webkit-transform: translateX(-600%); transform: translateX(-600%); } 
 
\t 100% { -webkit-transform: translateX(0); transform: translateX(0); } 
 
} 
 

 
@keyframes moveToRight { 
 
\t 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 
 
\t 100% { -webkit-transform: translateX(600%); transform: translateX(600%); } 
 
} 
 

 
@keyframes moveToLeft { 
 
\t 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 
 
\t 100% { -webkit-transform: translateX(-600%); transform: translateX(-600%); } 
 
} 
 

 
.mi-slider { 
 
\t -webkit-touch-callout: none; 
 
\t -webkit-user-select: none; 
 
\t -khtml-user-select: none; 
 
\t -moz-user-select: none; 
 
\t -ms-user-select: none; 
 
\t user-select: none; 
 
} 
 

 
/* Media Queries */ 
 
@media screen and (max-width: 910px){ 
 
\t .mi-slider nav { 
 
\t \t max-width: 90%; 
 
\t } 
 
\t .mi-slider nav a { 
 
\t \t font-size: 12px; 
 
\t \t padding: 40px 10px 30px 14px; 
 
\t } 
 
} 
 

 
@media screen and (max-width: 740px){ 
 
\t .mi-slider { 
 
\t \t height: 300px; 
 
\t } 
 
\t .mi-slider nav { 
 
\t \t top: 220px; 
 
\t } 
 
} 
 

 
@media screen and (max-width: 490px){ 
 
\t .mi-slider { 
 
\t \t text-align: center; 
 
\t \t height: auto; 
 
\t } 
 

 
\t .mi-slider ul { 
 
\t \t position: relative; 
 
\t \t display: inline; 
 
\t \t bottom: auto; 
 
\t \t pointer-events: auto; 
 
\t } 
 

 
\t .mi-slider ul li { 
 
\t \t -webkit-animation: none !important; 
 
\t \t animation: none !important; 
 
\t \t -webkit-transform: translateX(0) !important; 
 
\t \t transform: translateX(0) !important; 
 
\t \t padding: 10px 3px; 
 
\t \t min-width: 140px; 
 
\t } 
 

 
\t .mi-slider nav { 
 
\t \t display: none; 
 
\t } 
 
}

Was ich versuche, ist der folgende Code aus dem demo.css Datei zu entfernen und sie auf die spezifischen Elemente anwenden was es brauchen wird, anstatt es auf alles anzuwenden. diesen Code verlässt, wird mit einigen Auswirkungen auf die Anzeige meiner Website, aber wenn ich es entfernen, es wirkt sich auch auf die gleitenden Elemente:

*, 
 
*:after, 
 
*:before { 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
\t padding: 0; 
 
\t margin: 0; 
 
}

Das Problem ist, dass ich weiß nicht, die Elemente, die diesen Code verwenden und warum es einige Auswirkungen auf die gleitenden Elemente hat.

Bitte lassen Sie mich wissen, wie ich dieses Problem lösen kann.

Answer 1

Wie in meinem anderen Thread versprochen, hier ist meine Hilfe mit Ihrem Problem.

Der problematische Code (siehe unten) ist eigentlich ein Hack/Fix, um den Browser dazu zu zwingen, den alten border-box-Modus anstelle des standardmäßigen content-box zu verwenden.

*, 
*:after, 
*:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
} 

Was ist der Unterschied zwischen den beiden Modi? Im Modus border-box kombiniert die Breite/Höhe des Elements die Breite/Höhe des Inhalts, der Füllung und der Ränder. Im Modus content-box bezieht sich die Breite/Höhe des Elements nur auf dessen Inhalt. Quelle: developer.mozilla.org.

Kurz gesagt, können Sie den problematischen CSS-Block sicher entfernen. Jedoch, dies wird dazu führen, dass einige Gegenstände größer werden.

Um das gleiche Aussehen zu gewinnen, müssen Sie alle Blöcke von CSS-Code suchen, die zusammen mitpadding oder borderwidth oder heightgesetzt. In diesen Fällen fügen Sie einfach die folgenden Zeilen in den Block:

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 

Aber, bei näherer Betrachtung, ich habe festgestellt, dass die demo.css nur zur Demonstration verwendet wird, und kann vollständig entfernt werden. Alles, was Sie für den Schieberegler für mehrere Elemente benötigen, ist in der style.css angegeben.

Answer 2

Grundsätzlich bewirkt der Stern, dass das CSS auf alles auf Ihrer Website angewendet wird. Sie können das Problem durch ein wenig Versuch und Irrtum beheben. Tauschen Sie einfach die Sterne gegen die Klassen aus, die anwendbar zu sein scheinen. Nur wenn man sich den Code anschaut, scheint es .mi-slider zu sein, aber es könnte auch ein paar zusätzliche Klassen geben. Sie haben nur eine Handvoll Klassen, also sollte es nicht zu lange dauern, um genau herauszufinden, welche zu verwenden ist.

.mi-slider, 
 
.mi-slider:after, 
 
.mi-slider:before { 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
\t padding: 0; 
 
\t margin: 0; 
 
}