2017-04-12 60 views
1

我正在制作一个网络材质组件的卡片,我想让我的模板布局里面有它的所有数据。为什么材料组件卡标题对齐到底?

现在,当我使用mdc-card__title或副标题时,他们两个正在对齐卡片的底部,我不想要。

我在做什么错?

看到代码的帮助:

.demo-card{ 
 
\t width:65%; max-height: 500px; 
 
\t position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}
<html> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
 
\t <link rel="stylesheet" href="main.css"> 
 
\t <link rel="stylesheet" 
 
     href="https://unpkg.com/[email protected]/dist/material-components-web.min.css"> 
 
</head> 
 
<body> 
 
\t <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> 
 
\t </div> 
 
</body> 
 
\t 
 
<script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script> 
 
    <script>mdc.autoInit()</script> 
 
</html>

为什么留下了空间,即使我没有添加任何媒体内容的媒体。

回答

1

这似乎是在设计上,根据docs

内容将是底部对齐,如果它比卡的高度。

,如果你想改变这顶对齐,而不是它应该是可以覆盖.mdc-cardjustify-content风格flex-start