试图在页面上水平打印我的博客文章答案

【问题标题】：Trying to print out my blog posts horizontally on the page试图在页面上水平打印我的博客文章
【发布时间】：2020-07-22 03:34:37
【问题描述】：

我尝试将它们打印为列，但这似乎不起作用。关于如何最好地做到这一点的任何想法？

<div class="post-block">
  <div v-for="(post,index) in posts" :key="post.slug + '_' + index">
    <router-link :to="'/blog/' + post.slug">
      <article class="media">
        <figure>
          <div class="posts"> 
            <img v-if="post.featured_image" :src="post.featured_image" alt="" style="max-width:25%;">
            <img v-else src="http://via.placeholder.com/250x250" alt="">
            <h2>{{ post.title }}</h2>
            <p>{{ post.summary }}</p>
          </div>
        </figure>
      </article>
    </router-link>
  </div>
</div>

  .post-block {
    background-color: #f8f8f8;
    color: #151515;
    position: relative;
  }

  p, h2 {
    color:#D3D3D3;
  }

【问题讨论】：

如果没有任何附带的 CSS，就不可能看到您的代码有什么问题。另外...为什么要在 <figure> 元素中测试整个帖子内容？
@Terry 我已经添加了我在那里的小 css。图形元素是在博客文章中添加任何照片的情况。我不需要吗？
您没有在任何地方使用post-block 类。此外，水平显示所有帖子不是一个好主意。在大屏幕上每行可能有 3 个帖子，然后是 2 个，然后是 1 个。随着屏幕变小？
@palaѕн 这就是我要找的，是的。在那之前我切断了代码。现在已经修复了
@palaѕн 我正在使用 bootstrap-vue，但可以轻松切换到 bootstrap 4

标签： twitter-bootstrap vue.js alignment

【解决方案1】：

您可以尝试更新 CSS，例如创建响应式布局。请根据您的要求更新配色方案。只需分享您可以根据需要使用和更新的基本布局：

.post-block {
  color: #151515;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.post-block>div {
  flex: 1 0 calc(26% - 10px);
  margin: 5px;
  padding: .5rem;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
  border-radius: 4px;
  color: #84613D;
  font-family: "Lucida Console", Monaco, monospace;
  background: #FDF9EA;
  border-bottom: 1px solid #F9F2D6;
  border-right: 1px solid #F9F2D6;
}
.post-block .posts {
  text-align: center;
  align-items: center;
  margin:0 auto;
}

@media (max-width: 768px) {
  .post-block>div {
    flex-basis: calc(34% - 10px);
  }
}

@media (max-width: 320px) {
  .post-block>div {
    flex-basis: calc(51% - 10px);
  }
}

p,
h2 {
  color: #D3D3D3;
}

Working Demo (_{请调整结果窗口的大小以查看响应式布局})

【讨论】：

@palash 我知道你是怎么做到的。这很完美。谢谢！
很高兴它有帮助！如今，Flexbox 和 Css Grid 帮了大忙 :-)