css - 自动调整 li 的大小并在它们之间添加空间(rtMedia 砌体)

Question

我正在使用 rtMedia 插件来显示带有用户上传图像的砌体画廊。我的问题是:如何在图像之间添加空间以将它们均匀分布在 ul 中？当我添加 margin 时，li 元素不再彼此相邻显示(第三个出现在下一行)。但是，当我添加 padding 时，li 中的 div 看起来比其他部分大。

我添加了以下 CSS 代码来自动调整 li 元素的大小。

.rtmedia-container {
  display: table;
  width: 100%;
}
.rtmedia-container ul {
  display: table-row;
}
.rtmedia-container ul li {
  display: table-cell;
  max-width: 33%;
}

<div class="rtmedia-container">
  <div id="rtm-gallery-title-container">...</div>
  <ul class="rtmedia-list">
    <li class="rtmedia-list-item">
      <div class="rtmedia-gallery-item-actions">...</div>
      <a class="rtmedia-list-item-a"> ... </a>
    </li>
    <li class="rtmedia-list-item">
      <div class="rtmedia-gallery-item-actions">...</div>
      <a class="rtmedia-list-item-a"> ... </a>
    </li>
    <li class="rtmedia-list-item">
      <div class="rtmedia-gallery-item-actions">...</div>
      <a class="rtmedia-list-item-a"> ... </a>
    </li>
  </ul>
</div>

我刚刚注意到画廊在除 Firefox 之外的所有浏览器中都与 div (rtm-gallery-title-container) 重叠。有人知道如何解决这个问题吗？

我还必须向 div .rtmedia-container 添加“position: relative”，因为画廊在其他浏览器中没有显示在正确的位置。

Answer 1

你可以使用border-collapse:separate + border-spacing

片段

.rtmedia-container {
  display: table;
  width: 100%;
  table-layout: fixed; /* optional  */
  border-collapse: separate;
  border-spacing: 5px;
  /*demo */
  border: 1px dashed red
}
.rtmedia-container ul {
  display: table-row;
}
.rtmedia-container ul li {
  display: table-cell;
  width: 33%;
}
.rtmedia-container ul li img {
  max-width: 100%;
  height:auto;
  display:block
}

<div class="rtmedia-container">
  <ul class="rtmedia-list">
    <li class="rtmedia-list-item">
      <div class="rtmedia-gallery-item-actions">...</div>
      <a class="rtmedia-list-item-a">
        <img src="//lorempixel.com/700/300" />
      </a>
    </li>
    <li class="rtmedia-list-item">
      <div class="rtmedia-gallery-item-actions">...</div>
      <a class="rtmedia-list-item-a">
        <img src="//lorempixel.com/700/300" />
      </a>
    </li>
    <li class="rtmedia-list-item">
      <div class="rtmedia-gallery-item-actions">...</div>
      <a class="rtmedia-list-item-a">
        <img src="//lorempixel.com/700/300" />
      </a>
    </li>
  </ul>
</div>