加载时 Space 在 tables/div 之间

Question

我正在制作 html 时事通讯，并设法通过 rss 提要加载标题、缩略图和摘要。现在我的文章并排加载。我遇到的问题是我想在文章之间添加space。我尝试了 padding 和 cellspacing/padding 没有结果。

我还得提一下，这篇文章是在下面的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>

Answer 1

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

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

Answer 2

我建议为此使用 flexbox，并为包含 table 的每篇文章添加一个包装器 div。请参阅下面的代码片段，了解为您的新闻页面设置 flexbox 系统的基本设置。如果您运行代码段，请切换到完整页面视图并更改浏览器的宽度 window 以查看不同尺寸下的行为。

添加颜色仅供说明之用。 div.all 具有灰色背景。 table-wrapper div 是绿色的，每篇文章的实际 table 是红色的。

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>

加载时 Space 在 tables/div 之间

Space between tables/div's when loaded

css

html-table

html-email

newsletter