Question

我的问题是：如何将vimeo小部件蒙太奇显示为类似于图库的内联块？现在它是垂直堆叠。无论我尝试编辑什么课程，它仍然是这样。

这是定义vimeo小部件的CSS / HTML：

<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>

这是我用来设置图片库样式的CSS：

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;
}

问题可以在当前状态的页面上看到：http://pabloshead.com 我试图模仿的画廊位于当前状态的vimeo小部件之上。

谢谢！

Answer 1

只需将.clip设为display: inline-block;

即可

＆＃13;

.clip {
  display: inline-block;
}

＆＃13;

<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>

＆＃13;

Answer 2

经过多个小时的反复试验后，我复制了控制画廊的CSS，并将其改编为与Vimeo蒙太奇配合使用。它不完全相同，但使用相同的方法创建具有所需效果的内联块图像库。

任何想要复制此脚本以更好地展示他们的Vimeo蒙太奇的人都欢迎接受它，因为我没有首先创建它。请记住，您的蒙太奇必须设置为水平，最高图像尺寸为200px。

这是脚本：

 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%; 
  }
}

Vimeo Widget Montage垂直堆叠

2 个答案: