Question

我想要每个按钮＆＃34;阅读更多＆＃34;每个div的对齐在同一级别（在这种情况下在div的底部）。问题是我不想给div提供特定的高度，也不会改变任何标记或样式。

我可以使用一堆伪类选择器，但我想保持代码简单，也许这是一种更简单的方法。

.btn{
display: inline-block;
font-family: 'Oswald', sans-serif;  
font-weight: 400px;
padding: 5px 10px;
border: 2px solid #1AC4F8;
color: #1AC4F8;
cursor: pointer;}

Answer 1

Flexbox可以做到这一点。

它会将所有列设置为相等的高度，并告诉按钮位于每列的底部。

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*::before,
*::after {
  box-sizing: border-box;
}
.row {
  display: flex;
}
#services {
  background-color: rgb(265, 265, 265);
  color: #424242;
}
#services .col-3 {
  text-align: left;
  float: none;
  display: flex;
  flex: 0 0 25%;
  padding: 10px;
  flex-direction: column;
}
#sevices h3 {
  margin: 10px 0
}
.btn {
  margin-top: auto;
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-weight: 400px;
  padding: 5px 10px;
  border: 2px solid #1AC4F8;
  color: #1AC4F8;
  cursor: pointer;
  -webkit-transition: color 0.8s, background-color 0.8s;
  transition: color 0.8s, background-color 0.8s
}

＆＃13;

<section id="services">
  <!-- Services Starts Here -->
  <div class="wrapper">
    <h2>SERVICES</h2>
    <div class="divider"></div>
    <div class="row">
      <div class="col-3">
        <h3>Consulting and audit</h3>
        <p>Get help to accelerate your company online from our highly experienced specialists. It is as good as it sounds!</p>
        <a href="#" class="btn">Read more</a>
      </div>
      <div class="col-3">
        <h3>Web Development</h3>
        <p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p>
        <a href="#" class="btn">Read more</a>
      </div>
      <div class="col-3 right-align">
        <h3>Search Engine Optimization</h3>
        <p>Want to be on Page 1 of Google and Bing? Read about our SEO services that drive more potential customers.</p>
        <a href="#" class="btn">Read more</a>
      </div>
      <div class="col-3 right-align">
        <h3>Pay Per Click Management</h3>
        <p>Attract highly relevant audience with Google Adwords, Display, Retargeting, Facebook, YouTube, Twitter.</p>
        <a href="#" class="btn">Read more</a>
      </div>
    </div>
  </div>
</section>

＆＃13;

Answer 2

假设我已正确理解你，我做了以下修改：

.btn{
        display: inline-block;
        font-family: 'Oswald', sans-serif;  
        font-weight: 400px;
        padding: 5px 10px;
        border: 2px solid #1AC4F8;
        color: #1AC4F8;
        cursor: pointer;
        -webkit-transition: color 0.8s, background-color 0.8s;
        transition: color 0.8s, background-color 0.8s;
      position: absolute;
      bottom: 0px;
    }
    .wrapper {
       position: relative;
    }

将position: absolute;添加到您的btn班级
添加bottom: 0px以赞扬该职位（再次向btn班级）
将position: relative;添加到wrapper课程中，以便btn知道它自身的定位。

您可能需要更新现有的CSS以适应更改。

更新了Fork：

https://jsfiddle.net/exaboofu/

Answer 3

一种解决方案需要使用flexbox和绝对定位：

https://jsfiddle.net/aLbu6frL/6/

.row {
  display: flex;
  flex-direction: row;
  padding-bottom:40px;
}
.column {
  flex: 0 0 auto;
  position: relative;
}
.btn-bottom {
  position: absolute;
  bottom: -40px;
  left: 0px;
  right: 0px;
  text-align:center;
}

Answer 4

请在现有内容中添加更多CSS，并将按钮与底部对齐，请参阅下面的CSS代码：

    #services .right-align h3, #services .right-align p{
        text-align: right;
    }
    #services .right-align .btn{
        text-align:left;
    }

    .btn{
        bottom: 0;
        position:absolute;
    }

Answer 5

您可以将p tag设置为最小高度。我只是尝试它，它的工作对我来说看到下面的示例代码。您可以根据需要设置p标签高度。

#services .row .col-3 p {
  width: 100%;
  height: 300px;
}

对齐div底部的元素

5 个答案: