加载时表/div之间的空间答案

【问题标题】：Space between tables/div's when loaded加载时表/div之间的空间
【发布时间】：2018-06-15 06:01:28
【问题描述】：

我正在编写 html 时事通讯，并设法通过 rss 提要加载标题、缩略图和摘要。现在我的文章并排加载。我遇到的问题是我想在文章之间添加空格。我尝试了填充和单元格间距/填充，但没有结果。

我还必须提到，该文章加载了 SEPARATALY 图片如下。

<div class="all">
  <table style="width:300px; display:inline-block; float:left;  border-collapse: collapse;">
    <tr>
      <td>
        <div class="thumbnail" style="padding: 20px">
          <!--#image name="image" #-->
          <img src="http://cloud-files.crsend.com/img/noimage.png" style="width:300px; " />
          <!--#/image#-->
          <div class="title" style="text-align:center;">
            <!--#html name="title" #-->
            <h4>Thumbnail label</h4>
            <!--#/html#-->
          </div>
          <div class="description">
            <!--#html name="description" #-->
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
            <!--#/html#-->
          </div>
          <p>
            <a href="#" class="btn btn-info btn-xs" role="button">Button</a>
            <a href="#" class="btn btn-default btn-xs" role="button">Button</a>
          </p>
        </div>
      </td>
    </tr>
  </table>
</div>

【问题讨论】：

我认为border-collapse: collapse; 是你的问题，试试border-collapse: separate; 和border-spacing: 20px;（或任何你想要的间距）。
你在哪里需要空间？在文章的上方/下方或在两个水平相邻的文章之间？

标签： css html-table html-email newsletter

【解决方案1】：

我建议为此使用 flexbox，并为每个包含文章的表格添加一个包装 div。请参阅下面的 sn-p，了解新闻页面的 flexbox 系统的基本设置。如果您运行 sn-p，请切换到全页视图并更改浏览器窗口的宽度以查看不同大小的行为。

添加颜色仅用于说明。 div.all 具有灰色背景。表格包装器 div 为绿色，每篇文章的实际表格为红色。

div.all {
  width: 100%;
  background: #eee;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: stretch;
}

div.all > div.table {
  flex-shrink: 1;
  background: #dfd;
}

div.table > table {
  width: 300px;
  margin: 1em;
  background: #fcc;
}

<div class="all">
<div class="table">
  <table style="border-collapse: collapse;">
    <tr>
      <td>
        <div class="thumbnail" style="padding: 20px">
          <!--#image name="image" #-->
          <img src="http://cloud-files.crsend.com/img/noimage.png" style="width:300px; " />
          <!--#/image#-->
          <div class="title" style="text-align:center;">
            <!--#html name="title" #-->
            <h4>Thumbnail label</h4>
            <!--#/html#-->
          </div>
          <div class="description">
            <!--#html name="description" #-->
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
            <!--#/html#-->
          </div>
          <p>
            <a href="#" class="btn btn-info btn-xs" role="button">Button</a>
            <a href="#" class="btn btn-default btn-xs" role="button">Button</a>
          </p>
        </div>
      </td>
    </tr>
  </table>
  </div>
  <div class="table">
  <table style="border-collapse: collapse;">
    <tr>
      <td>
        <div class="thumbnail" style="padding: 20px">
          <!--#image name="image" #-->
          <img src="http://cloud-files.crsend.com/img/noimage.png" style="width:300px; " />
          <!--#/image#-->
          <div class="title" style="text-align:center;">
            <!--#html name="title" #-->
            <h4>Thumbnail label</h4>
            <!--#/html#-->
          </div>
          <div class="description">
            <!--#html name="description" #-->
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
            <!--#/html#-->
          </div>
          <p>
            <a href="#" class="btn btn-info btn-xs" role="button">Button</a>
            <a href="#" class="btn btn-default btn-xs" role="button">Button</a>
          </p>
        </div>
      </td>
    </tr>
  </table>
  </div>
</div>

【讨论】：

【解决方案2】：

一篇文章显示在表格中？如果是这样，请在每篇文章的表格前添加一个 div 并设置正确的填充。

我建议不要直接在 DOM 中设置 html 页面的样式，而是为此使用 css 文件，将 css 和 html 分开更有利于未来的维护可扩展性 ...ect

【讨论】：