加载时表/div之间的空间

Question

我正在做一个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>

​

Answer 1

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

只为插图添加颜色。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>

​

Answer 2

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

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