如何用HTML/CSS实现Card Reveal卡片并排及页面自适应？

你的问题核心是未利用Materialize的栅格系统对卡片进行布局控制，只需给每个卡片添加响应式列类即可实现并排与自适应效果：

修改后的代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" />

<div class="row">
  <!-- 第一个卡片包裹响应式列容器 -->
  <div class="col s12 m6">
    <div class="card blue-grey darken-1">
      <div class="card-image waves-effect waves-block waves-light">
        <img class="activator" src="/Users/sarahgarson/Downloads/WhatsApp Image 2024-03-15 at 18.03.28 (1).jpeg" />
      </div>
      <div class="card-content">
        <span class="card-title activator white-text">全栈开发课程<i class="material-icons right">more_vert</i></span>
      </div>
      <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">关于我的全栈开发课程：<i class="material-icons right">close</i></span>
        <p>(此处省略部分内容...)</p>
        <p>(此处省略部分内容...)</p>
      </div>
    </div>
  </div>

  <!-- 第二个卡片包裹响应式列容器 -->
  <div class="col s12 m6">
    <div class="card blue-grey darken-1">
      <div class="card-image waves-effect waves-block waves-light">
        <img class="activator" src="/Users/sarahgarson/Downloads/WhatsApp Image 2024-03-15 at 23.03.21.jpeg" />
      </div>
      <div class="card-content">
        <span class="card-title activator white-text">机械工程课程<i class="material-icons right">more_vert</i></span>
      </div>
      <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">关于我的机械工程课程：<i class="material-icons right">close</i></span>
        <p>(此处省略部分内容...)</p>
        <p>(此处省略部分内容...)</p>
      </div>
    </div>
  </div>
</div>

关键说明 #

• col s12 m6 类的作用：在小屏幕（宽度<600px）下，每个卡片占满整行；在中等及以上屏幕（宽度≥600px）下，每个卡片占据一半宽度，自动实现并排布局与尺寸自适应。
• Materialize基于12列栅格系统，通过给容器添加col类并指定不同断点的列数，就能快速实现响应式布局。
• 注意：部署项目时需将本地图片路径替换为线上可访问的URL。

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