Question

与问题vertical spacing between images类似，如何在

之间引入间距

视频和图片
图片和图片
视频和视频

以统一方式使用HTML5 + CSS，假设所有这些对象具有相同的高度？让我们说，我有一个包含10个对象的列表，每个对象都是<IMG height=600 ...>或<VIDEO height=600 ...>...</VIDEO>，我想引入大约1ex的垂直空间并且相同每对这样的物体之间的水平空间。网页应该是可见的，没有水平滚动（只要视口宽度至少与最大图像/视频的宽度一样大）。

至于水平间距，到目前为止我最好的尝试是在其间写 ，这非常有效。但如何达到统一的垂直空间？不幸的是，在视频对象上使用边距或填充CSS属性会使其基线与图像的基线不同...

Answer 1

您可以使用元素包装器来实现这一目标。 CSS。这样的事情：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

li {
  margin: 5px;
  float: left
}

<ul>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
</ul>

在HTML + CSS中引入图像和视频之间统一的垂直和水平间距？

1 个答案: