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。您可以抓取最大高度的元素，然后将所有所需元素设置为其高度。不过，对于您要寻找的内容来说，这可能有点过大。

Answer 2

文本遍历您的图像是您需要处理的第一个问题。为避免这种情况发生，您可以使用shape-outside css来包装文本，以使文本显示在图像的旁边和下方，但不能覆盖它。 Example

就包含高度而言，我会从卡p上删除绝对位置，然后使用overflow:auto;添加一个高度，因为滚动到“溢出”设置为滚动时，会自动出现滚动条元素是否溢出。如果您想在所有卡上进行垂直滚动，则可以使用overflow-y

希望这会有所帮助

文字/图片环绕：

.sq {
  width: 80px;
   height: 80px;
  margin: 7px;
  background: forestgreen;
  color: #111;
  border-radius: 10%;
  text-align: center;
  font-size: 15px;
  float: left;
  shape-outside: (80px 80px 80px 80px, 10px);
}

span {
  padding-top: 10px;
  display: inline-block;
}

<div class="sq"><span>Image</span></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
  publishing software
</p>
<p> like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
  and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
  publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
  took a galley of type and scrambled it to make a type specimen book. </p>

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

2 个答案: