材料设计组件 - 当添加宽度问题，高度卡

<div class="mdc-card problem"> 
     <section class="mdc-card__primary"> 
      <h1 class="mdc-card__title mdc-card__title--large">title 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. Quisquam nostrum nisi optio iusto excepturi sequi itaque. Vitae laudantium fugiat, id eius voluptates placeat labore magnam est saepe sapiente et molestias quaerat numquam excepturi illum dolores quam error, eaque rerum ea vero ipsum sequi. Sapiente adipisci reiciendis quod officia aliquam quidem praesentium cupiditate facere, magni nemo, asperiores, reprehenderit eveniet corporis eligendi et. Numquam voluptatem, consectetur. A harum quas, veritatis blanditiis, officia impedit voluptas laborum itaque delectus dolore explicabo aut, culpa iste sapiente repellat voluptate voluptates commodi dignissimos similique repudiandae. Nulla expedita atque dolore alias, facilis ipsam qui doloribus, iure quo animi. 
     </section> 
     <section class="mdc-card__actions"> 
      <button class="mdc-button mdc-button--compact mdc-card__action">action 1</button> 
      <button class="mdc-button mdc-button--compact mdc-card__action">action 2</button> 
     </section> 
    </div>

.problem { 
    height: 350px; 
    width: 350px; 
}

demo - 演示第一行是全宽没有任何问题，与第二排的大配套文本的问题，第三个用支持小文材料设计组件 - 当添加宽度问题，高度卡

mdc-card - docs

如何处理的卡的宽度和高度。

什么是最好的方式来处理这种问题

来源

2017-07-08 bhv

只添加widthdemo

或

如果所有的卡是在同一高度的东西 - 添加height，overflow: hidden;到mdc-card__supporting-text类demo

截至目前这样结束

来源

2017-07-11 05:44:50 bhv

材料设计组件 - 当添加宽度问题，高度卡

回答

相关问题