Question

经过一些建议后，我似乎无法找到有关如何执行此操作的任何信息，并且无法通过在代码中尝试多种方案来解决这个问题。

我想要两个分为8和4的列。（现在考虑将其用于桌面）

8宽的列将具有全宽卡，但是，无论我做什么，卡的高度都会导致另一列与高度匹配。我如何阻止这一点，以便我可以使用不同高度的卡片，这些卡片不会导致其他内容与最高的高度相匹配？

Answer 1

假设您有这个：

.mdl-grid
  .mdl-card.mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-shadow--2dp
    %figure.mdl-card__media
      = image_tag "prequelle.jpg"  
    .mdl-card__title
      %h2.mdl-card__title-text
        Welcome to Hell
    .mdl-card__supporting-text  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...            
    .mdl-card__actions.mdl-card--border
      %a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect Read More
      .mdl-layout-spacer
      %button.mdl-button.mdl-button--icon.mdl-button--colored
        %i.material-icons favorite
      %button.mdl-button.mdl-button--icon.mdl-button--colored
        %i.material-icons share

  .mdl-card.mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-shadow--2dp
    %figure.mdl-card__media
      = image_tag "bg_map1.png"  
    .mdl-card__title
      %h2.mdl-card__title-text
        Welcome to Hell
    .mdl-card__supporting-text  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...            
    .mdl-card__actions.mdl-card--border
      %a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect Read More
      .mdl-layout-spacer
      %button.mdl-button.mdl-button--icon.mdl-button--colored
        %i.material-icons favorite
      %button.mdl-button.mdl-button--icon.mdl-button--colored
        %i.material-icons share

那么您的卡都将具有相同的高度。

您必须在mdl-card类中移动mdl-cell 内部

因此，请执行以下操作以获取不同的高度：

.mdl-grid
  .mdl-card.mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-shadow--2dp
    %figure.mdl-card__media
      = image_tag "prequelle.jpg"  
    .mdl-card__title
      %h2.mdl-card__title-text
        Welcome to Hell
    .mdl-card__supporting-text  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...            
    .mdl-card__actions.mdl-card--border
      %a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect Read More
      .mdl-layout-spacer
      %button.mdl-button.mdl-button--icon.mdl-button--colored
        %i.material-icons favorite
      %button.mdl-button.mdl-button--icon.mdl-button--colored
        %i.material-icons share

  .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet
    .mdl-card.mdl-shadow--2dp
      %figure.mdl-card__media
        = image_tag "bg_map1.png"  
      .mdl-card__title
        %h2.mdl-card__title-text
          Welcome to Hell
      .mdl-card__supporting-text  
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...            
      .mdl-card__actions.mdl-card--border
        %a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect Read More
        .mdl-layout-spacer
        %button.mdl-button.mdl-button--icon.mdl-button--colored
          %i.material-icons favorite
        %button.mdl-button.mdl-button--icon.mdl-button--colored
          %i.material-icons share

Answer 2

刚刚找到了我没有使用的内容网格类。正如我现在所想的那样工作。

Material Design Lite - 网格中不同高度的卡片

2 个答案: