Question

我正在尝试制作一个可垂直滚动的div，其中有三列包含一张卡片（来自Materialise CSS，请参阅此处的链接：http://materializecss.com/cards.html 在每一行。应该有多行，现在大约十或十二行，所以每列十到十二张卡。但是当我尝试在第一列和第二列中仅使用两张或三张卡时，卡片只是叠加在一起，并且实际上并没有自己创建行。

#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

您需要在身体中创建以下结构：

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

修改：

删除所有内联样式
从代码段添加代码

重叠将会消失，对免费代码和评论代码的响应速度也会消失，所以你应该好好去。

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

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

2 个答案: