html - 我如何在卡片中包含所有文本

Question

我有2列的布局-2行，每行2张卡，总共4张。

文本不在卡的外面，我如何将其保留在卡中，并将所有卡保持在同一高度。目前，它已经过硬编码，但将来会是动态的。

继承人image

这是该部分的HTML。该文本目前已进行硬编码，但将来会不断变化。

.testimonials {
  margin-top: 100px;
}

.testimonials h2 {
  text-align: center;
  font-size: 48px;
  margin-bottom: 15px;
}

.testimonials .subtitle {
  text-align: center;
  font-size: 18px;
  line-height: 150%;
  margin-bottom: 50px;
}

.cards {
  margin: 0 15%;
}

.cards:after {
  content: "";
  display: table;
  clear: both;
}

.card {
  background: #fff;
  float: left;
  height: 330px;
  width: 48%;
  margin: 0 2% 2% 0%;
  padding: 3rem;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(87, 87, 87, .1);
  border-radius: 4px;
  position: relative;
}

.card p {
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  position: absolute;
  margin: 0 7% 0 2%;
}

.card img {
  border-radius: 50%;
  height: 45px;
}

<section class="testimonials">
  <div class="row">
    <h2>Make your schedule work for you.</h2>
    <p class="subtitle">We built Happy Schedule for ourselves first, and you could say we were happy with the result.</p>

    <div class="cards">

      <div class="card">
        <p class="review">“One of the most user friendly and time saving aspects of Happy Schedule is the ability to easily set days and weeks in a different time zone. It made traveling over the past couple of months such a breeze, and so much less stressful to not worry
          about whether or not I had set the correct hours for my day. Huge relief!”</p>
        <img src="resources/img/user-01.jpg">
        <div>
          <p>Sasha Stone</p>
          <p>Florida, USA</p>
        </div>
      </div>

      <div class="card">
        <p class="review">The ability to save different templates of weekly schedules is a great time saver for teams that work on variable weekends. Team members like me have a few patterns to manage their week that can be easily saved and applied in a matter of seconds</p>
        <img src="resources/img/user-02.jpg">
        <div>
          <p>Nagesh Pai</p>
          <p>Mumbia, India</p>
        </div>
      </div>

      <div class="card">
        <p>“The colors and interface are very user-friendly. When I started as a Happiness Engineer at Automattic there was so much to learn about scheduling, but the good design of Happy Schedule made me feel calmer.”</p>
        <img src="resources/img/user-03.jpeg">
        <div>
          <p>Desiree Farnum</p>
          <p>Florida, USA</p>
        </div>
      </div>

      <div class="card">
        <p>“The drag-and-create user experience is a lifesaver. Our previous third-party tool required endless clicking to construct a schedule, which frayed our patience and could be punishing on our mouse hands. Even with more than 200 employees in one
          view, this tool removed the pain from our process.”</p>
        <img src="resources/img/user-04.jpg">
        <div>
          <p>Denise Williams</p>
          <p>Ontario, Canada</p>
        </div>
      </div>

    </div>
  </div>

</section>

Answer 1

如果您不介意滚动条，则可以在对象的.card类中放置一个y溢出：滚动（或自动，如果愿意的话）。

为了使所有元素的高度相同，您可能必须在页面加载和/或调整窗口大小时运行一些JS。您可以抓取最大高度的元素，并将所有所需元素设置为其高度。但是，这对于您要寻找的内容可能有点过大。