如何在 div 列中使用 Materialise CSS 卡制作单独的行？

Question

我正在尝试制作一个具有三列包含一张卡片的垂直可滚动 div（来自 Materialize CSS，请参见此处的链接：http://materializecss.com/cards.html 在每一行。应该有多行，现在大约 10 或 12 行，所以每列 10 或 12 张卡片。但是当我试图在第一列和第二列中只使用两三张卡片时，卡片只是相互重叠，实际上并没有形成自己的行。

#heading{
    font-family: 'Cabin', sans-serif;
}

.card {
    height:100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/>
<main>
    <div class = "featureditems" style = "overflow-y: scroll">
        <div style="float: left; width: 33%;">
            <div height = "100px" class="card row">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
            <div height = "100px" class="card row">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
            <div height = "100px" class="card row">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
        </div>

        <div style="float: left; width: 33%;">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
            <div height = "100px" class="card">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
        </div>
        <div style="float: left; width: 33%;">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
        </div>
    </div>
</main>

有谁知道我该如何解决这个问题？

Answer 1

#heading{
    font-family: 'Cabin', sans-serif;
}

.card {
 /*add inline-display*/
 display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/>
<main>
            <div class = "featureditems" style = "overflow-y: scroll">
                  <div style="float: left; width: 33%;">
                      <div height = "100px" class="card row">
                        <div class="card-image waves-effect waves-block waves-light">
                          <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                        </div>
                        <div class="card-content">
                          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                          <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                        </div>
                        <div class="card-reveal">
                          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                          <p>Here is some more information about this product that is only revealed once clicked on.</p>
                        </div>
                      </div>
                       <div height = "100px" class="card row">
                        <div class="card-image waves-effect waves-block waves-light">
                          <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                        </div>
                        <div class="card-content">
                          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                          <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                        </div>
                        <div class="card-reveal">
                          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                          <p>Here is some more information about this product that is only revealed once clicked on.</p>
                        </div>
                      </div>
                       <div height = "100px" class="card row">
                        <div class="card-image waves-effect waves-block waves-light">
                          <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                        </div>
                        <div class="card-content">
                          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                          <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                        </div>
                        <div class="card-reveal">
                          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                          <p>Here is some more information about this product that is only revealed once clicked on.</p>
                        </div>
                      </div>
                  </div>

                  <div style="float: left; width: 33%;">
                       <div class="card">
                        <div class="card-image waves-effect waves-block waves-light">
                          <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                        </div>
                        <div class="card-content">
                          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                          <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                        </div>
                        <div class="card-reveal">
                          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                          <p>Here is some more information about this product that is only revealed once clicked on.</p>
                        </div>
                      </div>
                                             <div height = "100px" class="card">
                        <div class="card-image waves-effect waves-block waves-light">
                          <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                        </div>
                        <div class="card-content">
                          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                          <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                        </div>
                        <div class="card-reveal">
                          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                          <p>Here is some more information about this product that is only revealed once clicked on.</p>
                        </div>
                      </div>
                  </div>
                  <div style="float: left; width: 33%;">
                       <div class="card">
                        <div class="card-image waves-effect waves-block waves-light">
                          <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                        </div>
                        <div class="card-content">
                          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                          <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                        </div>
                        <div class="card-reveal">
                          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                          <p>Here is some more information about this product that is only revealed once clicked on.</p>
                        </div>
                      </div>
                  </div>
            </div>
        </main>

现在怎么样

Answer 2

你需要在你的 body 中创建以下结构：

• .featureditems 是一列 N .card-row 行（在您的情况下为 3）
• .featureditems 中的三个 .card-row 容器：一个带有 3 个，一个带有 2 个，1 个带有 1 个实现 .card 卡。

修改：

• 删除全部内嵌样式
• 从 sn-p 添加代码

重叠将消失，免费和注释代码的响应能力，所以你应该很高兴。

.featureditems,
.card-row       { display: flex }           /* make them flexbox containers */
.featureditems  { flex-flow: column wrap }  /* a column of 1 to N rows (3 in your case) */

.card-row       { flex-flow: row wrap;      /* wrap to next row of cards when current row is full */
                  justify-content: center } /* modify justification as required (probably 'flex-start') */

.card           { flex: 0 1 20rem; margin: .5rem } /* don't grow, but do create a mobile break point at 320px width */
                                                   /* change to 'flex: 1 1 20rem' to see alternattive effect */

main            { padding: .5rem } /* with equal sized card margins you will get a nice 1rem space around each card */
                                   /* 'main' not really required for '.featureditems' to work */

/* ::before,::after,*  { outline: 1px dashed } /* show element outlines for debug, remove when done */

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/>
<main>
    <div class = "featureditems">
        <div class="card-row">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
        </div>
        <div class="card-row">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
        </div>
        <div class="card-row">
            <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="https://s-media-cache-ak0.pinimg.com/originals/7f/8d/2c/7f8d2cc47b1851081ec19b3da1d35699.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
                    <p><a href="https://www.pinterest.com/pin/554083560386026921/">Visit the site</a></p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
        </div>
    </div>
</main>