Попытка распечатать мои сообщения в блоге горизонтально на странице - PullRequest
Новая
       17

Попытка распечатать мои сообщения в блоге горизонтально на странице

0 голосов
/ 09 апреля 2020

Я пытался напечатать их в виде столбцов, но, похоже, это не работает. Любые идеи о том, как лучше всего выполнить sh это ?? 

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

1 Ответ

1 голос
/ 09 апреля 2020

Вы можете попробовать обновить CSS, как создать адаптивный макет. Пожалуйста, обновите цветовую схему в соответствии с вашими требованиями. Просто поделитесь базовым c макетом, который вы можете использовать и обновлять по мере необходимости: 

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

Рабочая демонстрация ( Пожалуйста, измените размер результата окно, чтобы увидеть адаптивный макет )

...