材料設計組件 - 當添加寬度問題，高度卡

<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

材料設計組件 - 當添加寬度問題，高度卡

回答

相關問題