Question

我使用rtMedia插件显示一个砌体库，其中包含用户上传的图片。我的问题是：如何在图像之间添加空格以在ul内均匀分布？当我添加margin时，li元素不再显示在彼此旁边（第三行显示在下一行）。但是当我添加padding时，li内的div看起来比其余的大。

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

＆＃13;

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

＆＃13;

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

＆＃13;

我刚注意到除了Firefox之外，每个浏览器中的库都覆盖了div（rtm-gallery-title-container）。有人知道如何解决这个问题吗？

我还必须添加＆＃34; position：relative＆＃34;到div .rtmedia-container，因为图库没有显示在其他浏览器的正确位置。

Answer 1

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

段

＆＃13;

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

＆＃13;

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

＆＃13;

自动调整li并在它们之间添加空间（rtMedia masonry）

1 个答案:

段