时间戳

首页 > 解决方案 > 适用于桌面和移动设备的两列卡片布局

css - 适用于桌面和移动设备的两列卡片布局

问题描述

标签： cssflexboxgrid

解决方案

这是一个带有基本 css 的模型。

这里要知道的重要一点是双 flexbox；一个用于卡片（img/paragraph）的弹性盒，一个用于所有卡片的弹性盒，并带有一个flex-wrap: wrap;以确保它们正确地完成工作。

我使用这个flexbox 备忘单来准确记住 flexbox 的工作原理 :)

这是 jsfiddle 代码的副本： 

section{
  display: flex;
  flex-wrap: wrap;
}

article{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  width: 300px;
}
<section>
  <article>
    <img src="http://lorempixel.com/150/100/" />
    <p>
      Some text.
    </p>
  </article>

  <article>
    <img src="http://lorempixel.com/151/100/" />
    <p>
      Some text.
    </p>
  </article>

  <article>
    <img src="http://lorempixel.com/150/101/" />
    <p>
      Some text.
    </p>
  </article>
</section>

编辑：我刚刚用灰色文本和垂直居中的段落编辑了小提琴:)

推荐阅读