代码之家 › 专栏 › 技术社区 › hope

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

gallery resize responsive-design css

hope · 技术社区 · 8 年前

我正在使用rtMedia插件来显示用户上传的图像的砖石画廊。我的问题是:如何在图像之间添加空间,以便在 ul ? 当我添加 margin 这个 li 元素不再相邻显示(第三个元素出现在下一行)。但当我加上 padding 内部的div 锂 看起来比其他的大。

我添加了以下CSS代码来调整 锂 元素。

.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图库标题容器)重叠。有人知道如何解决这个问题吗?

我还必须在div.rtmedia容器中添加“position:relative”,因为在其他浏览器中,图库没有显示在正确的位置。

1 回复 | 直到 8 年前

dippas 8 年前

您可以使用 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>

推荐文章

zxcvbnm · 为什么字符串::resize和字符串::substr O(1)

2 年前

Heinz · 无法调整非模式html对话框设置style='resize:both'的大小,但可用于模式对话框

2 年前

Alex Cai · 未最大化后的AWT面板布局问题

2 年前

GoGoAllen · 如何针对所有类型的浏览器大小修复我的网页布局?

6 年前

Alberto Soto · 媒体查询加载时动态激活/禁用脚本并调整窗口大小

6 年前

Jojo Narte · 如何将UIView调整为特定的高度和宽度,包括其子视图?

6 年前

Tarzan · Python调整图像大小

6 年前

Eddy · 调整窗体大小时调整标签字体大小

7 年前

Nemo XXX · 如何在QTableView中按比例调整列宽?

7 年前

Brian Hamill · Numpy调整图像大小/重缩放图像

7 年前