Vimeo 小部件蒙太奇垂直堆叠答案

【问题标题】：Vimeo Widget Montage Stacking VerticallyVimeo 小部件蒙太奇垂直堆叠
【发布时间】：2017-06-30 05:18:31
【问题描述】：

我的问题是：如何让 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 小部件上方。

谢谢！

【问题讨论】：

标签： html css vimeo

【解决方案1】：

只需将.clip 设置为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>

【讨论】：

感谢您的回复！然而，这并没有奏效。在我的 CSS 中，我已经尝试过： .vimeoBadge .clip { padding:0;显示：内联块；行高：0；我也只是尝试复制并粘贴您所写的内容，但没有成功！
@PabloKozatch 请创建一个minimal reproducible example 来复制问题。
对不起，我试过了，但 vimeo 蒙太奇在某种程度上依赖于图片库的 css，我不知道具体如何。正在发生的事情的示例正在我的网站上运行，我在问题底部链接到该网站。
@PabloKozatch 从.vimeoBadge .s200 中删除width: 100%; 并将width: auto; 添加到.vimeoBadge .clip a
谢谢，它删除了样式表中稍后由 css 应用的样式，但我需要像图片库一样根据页面宽度缩放图像。当然，必须有后者的某种组合才能实现这一目标。非常感谢您的帮助。

【解决方案2】：

经过数小时的反复试验，我复制了控制画廊的 CSS，并对其进行了调整以与 Vimeo 蒙太奇配合使用。它并不完全相同，而是使用相同的方法来创建具有所需效果的内联块图像库。

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

这是脚本：

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

【讨论】：