Vimeo Widget Montage vertikal gestapelt

Question

Meine Frage ist: Wie bekomme ich die Vimeo Widget Montage als Inline-Block ähnlich einer Bildergalerie angezeigt? Jetzt stapelt es vertikal. Egal welche Klasse ich versuche zu bearbeiten, es bleibt so.

Dies ist der CSS/HTML-Code, den vimeo Widget definiert:

<style id="badge-styles"> 
/* You can modify these CSS styles */ 
.vimeoBadge { margin: 0; padding: 0; font: normal 11px verdana,sans-serif; } 
.vimeoBadge img { display:inline-block; width:500px; height:auto; border: 0; } 

.vimeoBadge a, .vimeoBadge a:link, .vimeoBadge a:visited, .vimeoBadge a:active { color: #3A75C4; text-decoration: none; cursor: pointer; } 
.vimeoBadge a:hover { color:#00CCFF; } 
.vimeoBadge #vimeo_badge_logo { margin-top:8px; width: 57px; height: 16px;} 
.vimeoBadge .credit { font: normal 11px verdana,sans-serif; } 
.vimeoBadge .clip { padding:0; display:inline-block; line-height:0; } 
.vimeoBadge .s200 { width: 100%; } 

.vimeoBadge .clip a { display:inline-block;} 
.vimeoBadge .vertical { float: none; } 
.vimeoBadge .caption { font: normal 11px verdana,sans-serif; overflow:hidden; width: auto; height: 30px; } 
.vimeoBadge .clear { display: block; clear: both; visibility: hidden; } 
.vimeoBadge .s160 { width: 160px; } .vimeoBadge .s80 { width: 80px; } .vimeoBadge .s100 { width: 100px; } 


</style><div id="badge"> 
<div class="vimeoBadge horizontal"> 
<script src="https://vimeo.com/pablokozatch/badgeo/?script=1&badge_layout=horizontal&badge_quantity=8&badge_size=200&badge_stream=uploaded&show_titles=no"></script> 
</div> 
</div> 

Und das ist die CSS, dass ich die Fotogalerie stylen bin mit: kann

body { 
    width: 80%; 
    margin: 30px auto; 
    font-family: sans-serif; 
} 

h3 { 
    text-align: center; 
    font-size: 1.65em; 
    margin: 0 0 30px; 
} 

div { 
    font-size: 0; 
} 

a { 
    font-size: 18px; 
    overflow: hidden; 
    display: inline-block; 
    margin-bottom: 8px; 
    width: calc(50% - 4px); 
    margin-right: 8px; 
} 

a:nth-of-type(2n) { 
    margin-right: 0; 
} 

@media screen and (min-width: 50em) { 
    a { 
    width: calc(25% - 6px); 
    } 

    a:nth-of-type(2n) { 
    margin-right: 8px; 
    } 

    a:nth-of-type(4n) { 
    margin-right: 0; 
    } 
} 

a:hover img { 
    -webkit-transform: scale(1.15); 
} 

a.overlaylogo:hover { 
    background-color:none; 
    color:#000; 
    text-decoration:none; 
} 

figure { 
    margin: 0; 
} 

img { 
    border: none; 
    max-width: 100%; 
    height: auto; 
    display: block; 
    background: #ccc; 
    transition: -webkit-transform .2s ease-in-out; 
} 

.p a { 
    display: inline; 
    font-size: 13px; 
    margin: 0; 
} 

.p { 
    text-align: center; 
    font-size: 13px; 
    padding-top: 8px; 
} 

Das Problem gesehen werden auf der Seite in ihrem aktuellen Zustand hier: http://pabloshead.com Die Galerie, die ich nachzuahmen versuche, ist über dem Vimeo Widget in seinem aktuellen Zustand.

Danke!

Answer 1

Stellen Sie einfach .clip zu display: inline-block;

.clip { 
 
    display: inline-block; 
 
}

<div id="badge"> 
 
    <div class="vimeoBadge horizontal"> 
 
    <script src="https://vimeo.com/pablokozatch/badgeo/?script=1&badge_layout=horizontal&badge_quantity=8&badge_size=200&badge_stream=uploaded&show_titles=no"></script> 
 
    </div> 
 
</div>

Answer 2

Nach vielen Stunden des Ausprobierens ich die CSS repliziert, die die Galerie wurde Steuern und angepasst es mit der Vimeo Montage zu arbeiten. Es ist nicht genau dasselbe, aber es verwendet den gleichen Ansatz, um eine Inline-Block-Bildergalerie mit den gewünschten Effekten zu erstellen.

Jeder, der dieses Skript replizieren möchte, um seine Vimeo-Montage besser darzustellen, kann es gerne nehmen, da ich es nicht selbst erstellt habe. Denken Sie daran, dass Ihre Montage als horizontal und mit der höchsten Bildgröße von 200px eingestellt werden muss. Hier

ist das Skript:

body { 
    margin: 0; 
    padding: 0; 
} 
.vimeoBadge img { 
    min-width:100%; 
    max-width:100%; 
    height:auto; 
    transition: -webkit-transform .2s ease-in-out; 
} 
.vimeoBadge .clip { 
    display:inline-block; 
    width:25%; 
} 
.vimeoBadge div{ 
    margin-right:0px; 
} 
.vimeoBadge .clip a { 
    font-size: 18px; 
    overflow: hidden; 
    display: inline-block; 
    width: 100%; 
    } 
a:hover img {-webkit-transform: scale(1.15)} 

@media screen and (max-width: 50em) { 
    .vimeoBadge .clip { 
    width:50%; 
    } 
}