2

我正在制作一张带有 web 材质组件的卡片，我希望我的模板布局能够将所有数据都包含在其中。

现在，当我使用 mdc-card__title 或 subtitle 时，它​​们都与我不想要的卡片底部对齐。

我做错了什么吗？

请参阅代码以获取帮助：

.demo-card{
	width:65%; max-height: 500px;
	position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
}
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="main.css">
	<link rel="stylesheet"
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
	<div class="mdc-card demo-card">
         <section class="mdc-card__primary">
            <h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1>
            <h2 class="mdc-card__subtitle">Subtitle here</h2>
          </section>
          <section class="mdc-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.
          </section>
	</div>
</body>
	
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
</html>

为什么即使我没有添加任何媒体内容，它也会为媒体留下空间。

4

1 回答 1

2

根据文档，这似乎是设计使然：

如果内容小于卡片的高度，则内容将底部对齐。

如果您想将其更改为顶部对齐，则应该可以覆盖.mdc-card'sjustify-content样式。flex-start

于 2017-06-15T03:06:59.100 回答