Css 物化卡片使图像全宽_Css_Materialize

Css 物化卡片使图像全宽

css

Css 物化卡片使图像全宽,css,materialize,Css,Materialize,我建立了一个独立的网页来尝试materialize。我遵循materialize站点的CDN设置示例，并使用他们的示例添加了一张水平卡。我使用的图像是150x150px。生成的页面使图像成为屏幕的全宽（iMac），并显示以下文本。我对示例代码进行了深入研究，发现有一个容器类，在我可以看到的站点上没有提到。当我添加这些时，卡片图像填满了容器的整个宽度。我给image类添加了一个宽度。没有效果。我将class=“responsive img”添加到图像中。它也没有效果。这是我的原始代码 <ht

我建立了一个独立的网页来尝试materialize。我遵循materialize站点的CDN设置示例，并使用他们的示例添加了一张水平卡。我使用的图像是150x150px。生成的页面使图像成为屏幕的全宽（iMac），并显示以下文本。我对示例代码进行了深入研究，发现有一个容器类，在我可以看到的站点上没有提到。当我添加这些时，卡片图像填满了容器的整个宽度。我给image类添加了一个宽度。没有效果。我将class=“responsive img”添加到图像中。它也没有效果。这是我的原始代码

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django Materialize Sandbox</title>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
</head>
 <body>
    <div class="row">
      <div class="col s12 m7">
        <h2 class="header">Horizontal Card</h2>
        <div class="card horizontal">
            <div class="card-image">
                <img src="https://via.placeholder.com/150

C/O https://placeholder.com/small_image.png">
        </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>
<!--Import jQuery before materialize.js-->
<script type="text/javascript"                    src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js">    </script>
</body>
</html>


Django物化沙箱
横卡
我是一张非常简单的卡片。我擅长包含少量信息

还有什么我错过的吗？是否有更好的文档？除了materialize网站，我找不到其他网站

修理

当我添加@Doughballs fix时，它仍然不起作用。那时我决定检查我正在使用的css的版本。materialize站点已达到1.0.0。当我在标题中更改了两个版本号时，它起了作用。我一定是从另一个站点获取了标题。

物化卡从它们所在的列中获取宽度。如果您熟悉该系统，那么很容易理解：

列s12=包含元素的100%（全宽）

第s6列=50%

col s4=33%

等等

如果您使用文档中相同的标记，就像我在本文中所做的那样，您的卡片将是预期的宽度，而无需在内部图像上设置额外的控件

<div class="row">
    <div class="col s12 m7">
      <div class="card">
        <div class="card-image">
          <img src="images/sample-1.jpg">
          <span class="card-title">Card Title</span>
        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>


卡片标题
我是一张非常简单的卡片。我擅长包含少量信息。
我很方便，因为我需要很少的标记来有效地使用

此代码取自

如果您遇到问题，很可能是因为错误的标记

编辑：

因此，我使用文档中的水平示例创建了一个代码笔。您是对的，它们缺少标记中的行包装器。在任何情况下，所有基于网格的布局系统都使用相同的结构：列位于行中，行位于容器中

我想说水平卡不如标准卡灵活/响应性好。在一些较窄的尺寸下，横向图像下方可能有空白，而在非常宽的尺寸下，纵向图像会使卡片太高而不实用。因此，需要一些常识来确保图像正确显示

我在问题中留下了无关的代码。看起来你就是这么说的。我的横卡有问题。materialize sight上的渲染在图像右侧显示文本。我将代码添加到可待因并将其链接。测试在卡片下面。我在Django之外重新创建了这个页面。对不起，你是说你用叉子叉代码笔了吗？如果有，请发送链接。主要问题是我在CDN链接中使用了旧版本。