引导程序列中的等高div

时间：2018-08-13 03:30:03

标签： html css

我有一组三列。每列内的内容如下：

  1. 一个小的圆形div，其中包含一个超棒的字体图标。
  2. 一个小标题标签
  3. 另一个div，其中包含一些文本和一个按钮。

我一直在让第三件物品彼此高度相等时遇到问题。我还需要将按钮设置在相同的高度。我了解如何使div具有相同的高度（显示为here！）

但是，我无法使这些div具有相同的高度，并且按钮无法位于相同的位置。这是HTML代码：

<div class="container-fluid">
<div class="row justify-content-center h-100">
  <div class="col-3">
    <div class="circleAboutUs">
      <i class="fas fa-user-astronaut fa-5x" style="color: white; padding-top: 25px; padding-left: 34px;"></i>
    </div>
    <h1 class="about-us-text">Hackers</h1>
    <div class="about-us-content-container">
      <div class="about-us-content-text">
        The early registration deadline is October 15th and regular registration closes November 3rd.
        For more information check out the FAQ!
      </div>
      <button class="about-us-button" type="button"><h2>Register</h2></button>
    </div>
  </div>
  <div class="col-3">
    <div class="circleAboutUs">
      <i class="fab fa-reddit-alien fa-5x" style="color: white; padding-top: 30px; padding-left: 28px"></i>
    </div>
    <h1 class="about-us-text">Mentors</h1>
    <div class="about-us-content-container">
      <div class="about-us-content-text">
        Interested in volunteering to help our hackers the day of the event?
        Sign up here to be a mentor for Codestellation.
      </div>
      <button class="about-us-button" type="button"><h2>Sign Up</h2></button>
    </div>
  </div>
  <div class="col-3">
    <div class="circleAboutUs">
      <i class="fas fa-space-shuttle fa-rotate-270 fa-5x" style="color: white; padding-right: 27px; padding-top: 14px; padding-bottom: 5px"></i>
    </div>
    <h1 class="about-us-text">Sponsors</h1>
    <div class="about-us-content-container">
      <div class="about-us-content-text">
        Codestellation can&#8217t take off without our sponsors!
        Learn more about what perks you&#8217ll recieve and how your partnership will contribute to the event.
      </div>
      <button class="about-us-button" type="button"><h2>Sponsor</h2></button>
    </div>
  </div>
</div>

这是CSS：

.circleAboutUs {
     border: 3px solid #FAA880;
     margin: 0 auto;
     border-radius: 100%;
     height: 140px;
     width: 140px;
     background-color: #FAA880;
 }

.about-us-content-container {
    margin: auto;
    border-radius: 10%;
    background-color: #FAA880;
    text-align: center;
    margin-bottom: 60px;
}

.about-us-content-text {
    font-family: 'Mina', 'Montserrat', monospace;
    padding: 25px 25px;
    font-size: 2em;
}

.about-us-text {
    text-align: center;
    color: #3A318C;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.about-us-button {
    border-radius: 20%/50%;
    border: 1px solid black;
    text-align: center;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    color: #3A318C;
    margin-bottom: 10px;
    padding-top:10px;
}

.about-us-button:hover {
   cursor: pointer;
    background-color: white;
}

.col-sm > .about-us-content-container {
    height: 55px;
}

当前看起来是这样的：Example

我希望它保持其响应能力，因此标头和div仍然可以很好地在移动设备上堆叠。

1 个答案:

答案 0 :(得分：1)

通过使用弹性框可以轻松实现此行为。

  • 首先，我们为引导程序中所有列的每个子级创建div包装器。
  • 我们将这些孩子的身高设置为100%，以使他们填满整个容器。
  • 然后，我们设置flex-grow: 1，以便about-us-content-container将填充整个容器，包括备用空间。
  • 但是现在about-us-content-container将有auto的边距，这将阻止它填充整个容器。因此，我们必须将边距设置为0。
  • about-us-content-container现在会填满所有空格。但是该按钮仍然不在底部。我们可以通过做同样的事情来做到这一点
    • 将显示设置为弹性。
    • 将flex-grow中的about-us-content-text设置为1。
    • 这些按钮现在占据了about-us-content-container的整个宽度。为避免这种情况，请在按钮周围缠上div。

以下是Codepen中的解决方案：https://codepen.io/anhanhvina/pen/WKmoWQ

下面是有效的代码。现在，您可以添加更多类以使其具有响应性。

.col-3 > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.about-us-content-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}

.about-us-content-text {
  flex-grow: 1;
}


.circleAboutUs {
     border: 3px solid #FAA880;
     margin: 0 auto;
     border-radius: 100%;
     height: 140px;
     width: 140px;
     background-color: #FAA880;
 }

.about-us-content-container {
    margin: auto;
    border-radius: 10%;
    background-color: #FAA880;
    text-align: center;
    margin-bottom: 60px;
}

.about-us-content-text {
    font-family: 'Mina', 'Montserrat', monospace;
    padding: 25px 25px;
    font-size: 2em;
}

.about-us-text {
    text-align: center;
    color: #3A318C;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.about-us-button {
    border-radius: 20%/50%;
    border: 1px solid black;
    text-align: center;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    color: #3A318C;
    margin-bottom: 10px;
    padding-top:10px;
}

.about-us-button:hover {
   cursor: pointer;
    background-color: white;
}

.col-sm > .about-us-content-container {
    height: 55px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row justify-content-center h-100">
    <div class="col-3">
      <div>
        <div class="circleAboutUs">
          <i class="fas fa-user-astronaut fa-5x" style="color: white; padding-top: 25px; padding-left: 34px;"></i>
        </div>
        <h1 class="about-us-text">Hackers</h1>
        <div class="about-us-content-container">
          <div class="about-us-content-text">
            The early registration deadline is October 15th and regular registration closes November 3rd. For more information check
            out the FAQ!
          </div>
          <div>
            <button class="about-us-button" type="button">
              <h2>Register</h2>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div>
        <div class="circleAboutUs">
          <i class="fab fa-reddit-alien fa-5x" style="color: white; padding-top: 30px; padding-left: 28px"></i>
        </div>
        <h1 class="about-us-text">Mentors</h1>
        <div class="about-us-content-container">
          <div class="about-us-content-text">
            Interested in volunteering to help our hackers the day of the event? Sign up here to be a mentor for Codestellation.
          </div>
          <div>
            <button class="about-us-button" type="button">
              <h2>Sign Up</h2>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div>
        <div class="circleAboutUs">
          <i class="fas fa-space-shuttle fa-rotate-270 fa-5x" style="color: white; padding-right: 27px; padding-top: 14px; padding-bottom: 5px"></i>
        </div>
        <h1 class="about-us-text">Sponsors</h1>
        <div class="about-us-content-container">
          <div class="about-us-content-text">
            Codestellation can&#8217t take off without our sponsors! Learn more about what perks you&#8217ll recieve and how your partnership
            will contribute to the event.
          </div>
          <div>
            <button class="about-us-button" type="button">
              <h2>Sponsor</h2>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

相关问题
最新问题