Question

我使用Materialise Css库制作网站，但我无法使用以下代码成功添加横向卡片，这与下面链接中显示的指南完全相同： http://materializecss.com/cards.html

<div class="col s12 m7">
<h2 class="header">Horizontal Card</h2>
<div class="card horizontal">
  <div class="card-image">
    <img src="http://lorempixel.com/100/190/nature/6">
  </div>
  <div class="card-stacked">
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information.</p>
    </div>
    <div class="card-action">
      <a href="#">This is a link</a>
    </div>
  </div>
</div>

该卡仍会显示为垂直卡。关于问题可能是什么的任何想法？如果需要，我会提供更多信息..

Answer 1

Allen Hu请参考以下代码。

CSS:
    .card.horizontal {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

HTML:
    <div class="row">
            <div class="col s12 m4">
                <h2 class="header">Horizontal Card</h2>
                <div class="card horizontal">
                    <div class="card-image">
                        <img src="http://lorempixel.com/100/190/nature/6">
                    </div>
                    <div class="card-stacked">
                        <div class="card-content">
                            <p>I am a very simple card. I am good at containing small bits of information.</p>
                        </div>
                        <div class="card-action">
                            <a href="#">This is a link</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

在实现css库中实现水平卡时遇到问题

1 个答案: