Question

这是我的小提琴：https://jsfiddle.net/b6q7pmkg/ 我正在尝试实现两列显示卡，无论在移动设备还是台式机上，它始终保持两列。所以像这样：在台式机上：

在移动设备上：

这是我到目前为止所拥有的..但还不完全是..

.cardContainer {
  max-width: 30rem;
}

css：

.root {
    display: inline-block;
    width: 100%;
    border: 1px solid rgb(221, 221, 221);
    color: rgb(90, 90, 90);
}

.link {
    vertical-align: bottom;
    text-decoration: none;
    cursor: pointer;
}

.imageContainer{
    display: inline-block;
    vertical-align: top;
    width: 40%;
}

image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

.content {
  display: inline-block;
  vertical-align: top;
  width: 60%;
  padding: 1rem;
}

.large .title {
    font: 400 1.1875rem/1.263 'Avenir Next W01', 'Helvetica Neue', 'Helvetica', 'sans-serif';
    font-size: 1.1875rem;
    line-height: 1.263;
    letter-spacing: 0.0125rem;
    font-weight: 700;
}

.body {
    margin-top: 1rem;
    color: rgb(139, 139, 139);
    display: block;
}
.description {
    margin-bottom: 0;
    font-size: inherit;
    margin-top: 1rem;
}

Answer 1

Here's具有基本CSS的模型。

这里要知道的重要事情是双柔箱；一个用于卡片的flexbox（img /段落），一个用于所有卡片的flexbox，并带有一个flex-wrap: wrap;，以确保它们正确执行工作。

我使用this 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>

edit：我just made用灰色文字和垂直居中的段落对小提琴进行编辑：）

Answer 2

您也可以使用CSS Grid：

将所有卡放入<div class="grid-container">中，在CSS中添加以下行：

.grid-container{
 display: grid;
 grid-gap: 20px; /*that's optional, for the space between your cards*/
 grid-template-columns: repeat(auto-fit, 300px);
}

台式机和手机的两栏式卡布局

2 个答案: