如何使用Material Lite实现带图标和文字的并排CSS卡片布局

基于Material Lite自带的基础组件，搭配少量自定义CSS即可实现，无需引入其他第三方框架。

完整代码示例 #

HTML结构 #

<!-- 卡片外层容器，复用MDL自带的阴影和基础卡片样式 -->
<div class="mdl-card mdl-shadow--2dp custom-mini-card">
  <div class="custom-card-inner">
    <!-- 左侧图标，可替换为自定义图片标签 -->
    <i class="material-icons custom-card-icon">event</i>
    <!-- 右侧文字区域 -->
    <div class="custom-card-content">
      <div class="custom-card-title">待办日程</div>
      <div class="custom-card-subtitle">7项待处理</div>
    </div>
  </div>
</div>

CSS样式 #

/* 自定义小卡片基础属性 */
.custom-mini-card {
  width: 200px;
  padding: 12px 16px;
  border-radius: 4px;
  background: #ffffff;
  box-sizing: border-box;
}

/* 内部flex布局实现图标文字并排、垂直居中 */
.custom-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 图标样式设置，避免挤压变形 */
.custom-card-icon {
  font-size: 36px;
  color: #3f51b5;
  flex-shrink: 0;
}

/* 文字区域样式 */
.custom-card-title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.4;
}

.custom-card-subtitle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1.4;
}

可调整说明 #

• 卡片阴影可通过替换mdl-shadow--2dp为mdl-shadow--1dp/mdl-shadow--4dp等MDL预设阴影类调整深度，不需要阴影直接删除该类即可。
• 左侧如果使用自定义图片图标，只要给img标签设置固定宽高和flex-shrink: 0属性即可正常适配。
• 卡片宽度、颜色、字体尺寸均可根据需求自行修改，flex布局会自动适配内容高度，无需固定卡片高度。
• 如果需要卡片可点击，直接在外层容器绑定点击事件即可，无需修改布局结构。

内容的提问来源于stack exchange，提问作者Aatiya