加载时表/ div之间的空格

Question

我正在处理html简报，并设法通过RSS Feed加载标题，缩略图和摘要。现在，我的文章彼此相邻。我遇到的问题是我想在文章之间添加空格。我尝试了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

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

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

Answer 2

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;