Question

我正在尝试制作三张相同高度的卡片，并稍加填充（以使它们看起来不会彼此压碎）。

每张卡顶部的图像和底部的按钮。我认为，如果服务为主要内容也被隔开的，那将是一件好事......我需要添加“显示：柔性”的服务，主要内容也？

我不知道如果我在正确的方向要走了，但感觉好像我要下去一个兔子洞，然后它变得有点沮丧！

#services {
  background-color: #efefef;
}

#services-main-content {
  padding: 2% 0%;
  text-align: center;
}

#services-group-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-around;
  padding: 0% 0% 2% 0%;
}

.services-group {
  text-align: center;
  padding: 0.5em;
  background-color: #efefef;
  flex: 1 0 30%;
  border-left: 1px solid #AFAFAF;
}

.services-group:last-child {
  border-right: none;
}

#services>#services-group-container>.services-group>.services-image>img {
  display: block;
  width: 100%;
}

#services>#services-group-container>.services-group>.services-content>.button {
  color: #124a58;
  margin-top: auto;
}

#services>#services-group-container>.services-group>.services-content>.button:hover {
  color: #000;
}

.services-content {}

<section id="services">
  <div id="services-main-content">
    <h3 class="services-title">Services</h3>
    <p>Take a look into some of the services we offer!</p>
  </div>
  <div id="services-group-container">
    <div class="services-group">
      <div class="services-image">
        <img src="http://www.stevensegallery.com/600/400" />
      </div>
      <div class="services-content">
        <h3 class="services-title">Card One</h3>
        <p>Take a look at this stuff. Blah blah.</p>
        <a class="button">More &gt;&gt;</a>
      </div>
    </div>

    <div class="services-group">
      <div class="services-image">
        <img src="http://www.stevensegallery.com/600/400" />
      </div>
      <div class="services-content">
        <h3 class="services-title">Card Two</h3>
        <p>Great stuff in here, step right up and some other text!</p>
        <a class="button">More &gt;&gt;</a>
      </div>
    </div>

    <div class="services-group">
      <div class="services-image">
        <img src="http://www.stevensegallery.com/600/400" />
      </div>
      <div class="services-content">
        <h3 class="services-title">Card Three</h3>
        <p>What is this then? Something else? Yepity yup yepity yup yup yup.</p>
        <a class="button">More &gt;&gt;</a>
      </div>
    </div>
  </div>
</section>

间距柔性卡相同的高度？

0 个答案: