html - 固定每个盒子的大小

Question

我正在这里做一个元素:https://jsfiddle.net/x3rceway/

而且我被卡住了，因为即使底部有额外的空间，只要按钮始终在下方，我也无法使所有盒子都具有固定尺寸。我期待有这样的东西:

CLICK HERE IMAGE SCREENSHOT

这是我的 HTML:

<div class="col-1-3">

<img src="http://americanbitcoinacademy.com/wp-content/uploads/2017/01/The-Bitcoin-Transaction-Landscape.jpg" />
<h3 style="text-align: center;">BC 101 - The Bitcoin Transaction COURSE</h3>
<p>This course covers the basics of what Bitcoin is and how the Blockchain works, how to use a Bitcoin Wallet and why Bitcoin is important.</p>
<a href="https://xt348.infusionsoft.com/app/orderForms/The-Bitcoin-Transaction" target="_blank"><button class="btn btn-block btn-primary">PURCHASE COURSE &rarr;</button></a>

</div>

<div class="col-1-3">

<img src="http://americanbitcoinacademy.com/wp-content/uploads/2017/02/Intro-Logo-Horizontal.jpg" alt="" />
<h3 style="text-align: center;">TR 101 - Introduction to Bitcoin Trading</h3>
<p>This course is the introductory course for Bitcoin trading. It will teach you the basics and several of the important tools and need-to-know issues and topics to get up and running.</p>
<a href="https://xt348.infusionsoft.com/app/orderForms/Introduction-to-Bitcoin-Trading" target="_blank"><button class="btn btn-block btn-primary">PURCHASE COURSE &rarr;</button></a>

</div>


<div class="col-1-3">
<img src="http://americanbitcoinacademy.com/wp-content/uploads/2016/12/Pro-Logo-Horizontal.jpg" />
<h3 style="text-align: center;">TR 201 - The Professional Bitcoin Trading Course</h3>
<p>This course covers all of our offerings in one. This is for entrepreneurs who are serious about making serious income through Bitcoin trading. This course teaches how to get set up, what to watch out for, copy to paste into your ads, how to manage your customers, how to not get scammed, how to scale, etc. This also includes an inclusion into a private traders group with your class so you can discuss and figure out new ways to make money together.</p>
<a href="https://xt348.infusionsoft.com/app/orderForms/The-Professional-Bitcoin-Trading-Course" target="_blank"><button class="btn btn-block btn-primary">PURCHASE COURSE &rarr;</button></a>

</div>

<div style="clear: both;"></div>

<div class="col-1-3">
<img src="http://americanbitcoinacademy.com/wp-content/uploads/2016/12/Pro-Logo-Horizontal.jpg" />
<h3 style="text-align: center;">Bitcoin Trading Bootcamp</h3>
<p>This is similar in nature to The Professional Bitcoin Trading Course in the sense that we will cover all of the same topics covered in that course, plus up to date relevant ones, live and in person. You will also get a chance to watch pro traders trade live and learn how they manage several trades at the same time, what to do, what not to do, etc. This also includes an inclusion into a private traders group with your class so you can discuss and figure out new ways to make money together.</p>
<a href="#" target="_blank"><button class="btn btn-block btn-primary">PURCHASE COURSE &rarr;</button></a>

</div>

这是我的 CSS:

.col-1-3 {
  padding: 10px;
  width: 28%;
  float: left;
margin: 2.5%;
 border: 2px solid #000;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding-bottom: 0px;
font-family: 'Lato', Verdana;
}
.col-1-3 img {
  width: 100%;
}
.col-1-3 img {
  width: 100%;
}
a {
  margin: 0;
}
h3 {
  margin: 15px auto;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}

p{
line-height: 16px;
margin: 10px auto;
}
h4 {
  margin: 0 0 20px 0;
}

}
.btn-block {
  display: block;
  width: 100%;
margin-top: 22px;
background: #DD374D;
}

button.btn-block{
background: #DD374D;
font-family: 'Roboto';
margin-bottom: 10px;
font-weight: bold;
}

}
@media only screen and (max-width: 767px) {
  .col-1-3 {
    width: 44%;
  }
}
@media only screen and (max-width: 590px) {
  .col-1-3 {
    width: 94%;
  }
}

如何在不影响我的设计和响应能力的情况下固定盒子的高度？请使用我的 JSFIDDLE 向我展示如何修复它。

Answer 1

给盒子一个父盒子并分配display: flex; flex-wrap: wrap; 到父级，每行中的框的高度将匹配。

.col-1-3 {
  padding: 10px;
  width: 28%;
  float: left;
margin: 2.5%;
 border: 2px solid #000;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding-bottom: 0px;
font-family: 'Lato', Verdana;
}
.col-1-3 img {
  width: 100%;
}
.col-1-3 img {
  width: 100%;
}
a {
  margin: 0;
}
h3 {
  margin: 15px auto;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}

p{
line-height: 16px;
margin: 10px auto;
}
h4 {
  margin: 0 0 20px 0;
}

}
.btn-block {
  display: block;
  width: 100%;
margin-top: 22px;
background: #DD374D;
}

button.btn-block{
background: #DD374D;
font-family: 'Roboto';
margin-bottom: 10px;
font-weight: bold;
}

}
@media only screen and (max-width: 767px) {
  .col-1-3 {
    width: 44%;
  }
}
@media only screen and (max-width: 590px) {
  .col-1-3 {
    width: 94%;
  }
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

<div class="flex">
<div class="col-1-3">

<img src="http://americanbitcoinacademy.com/wp-content/uploads/2017/01/The-Bitcoin-Transaction-Landscape.jpg" />
<h3 style="text-align: center;">BC 101 - The Bitcoin Transaction COURSE</h3>
<p>This course covers the basics of what Bitcoin is and how the Blockchain works, how to use a Bitcoin Wallet and why Bitcoin is important.</p>
<a href="https://xt348.infusionsoft.com/app/orderForms/The-Bitcoin-Transaction" target="_blank"><button class="btn btn-block btn-primary">PURCHASE COURSE &rarr;</button></a>

</div>

<div class="col-1-3">

<img src="http://americanbitcoinacademy.com/wp-content/uploads/2017/02/Intro-Logo-Horizontal.jpg" alt="" />
<h3 style="text-align: center;">TR 101 - Introduction to Bitcoin Trading</h3>
<p>This course is the introductory course for Bitcoin trading. It will teach you the basics and several of the important tools and need-to-know issues and topics to get up and running.</p>
<a href="https://xt348.infusionsoft.com/app/orderForms/Introduction-to-Bitcoin-Trading" target="_blank"><button class="btn btn-block btn-primary">PURCHASE COURSE &rarr;</button></a>

</div>


<div class="col-1-3">
<img src="http://americanbitcoinacademy.com/wp-content/uploads/2016/12/Pro-Logo-Horizontal.jpg" />
<h3 style="text-align: center;">TR 201 - The Professional Bitcoin Trading Course</h3>
<p>This course covers all of our offerings in one. This is for entrepreneurs who are serious about making serious income through Bitcoin trading. This course teaches how to get set up, what to watch out for, copy to paste into your ads, how to manage your customers, how to not get scammed, how to scale, etc. This also includes an inclusion into a private traders group with your class so you can discuss and figure out new ways to make money together.</p>
<a href="https://xt348.infusionsoft.com/app/orderForms/The-Professional-Bitcoin-Trading-Course" target="_blank"><button class="btn btn-block btn-primary">PURCHASE COURSE &rarr;</button></a>

</div>

<div style="clear: both;"></div>

<div class="col-1-3">
<img src="http://americanbitcoinacademy.com/wp-content/uploads/2016/12/Pro-Logo-Horizontal.jpg" />
<h3 style="text-align: center;">Bitcoin Trading Bootcamp</h3>
<p>This is similar in nature to The Professional Bitcoin Trading Course in the sense that we will cover all of the same topics covered in that course, plus up to date relevant ones, live and in person. You will also get a chance to watch pro traders trade live and learn how they manage several trades at the same time, what to do, what not to do, etc. This also includes an inclusion into a private traders group with your class so you can discuss and figure out new ways to make money together.</p>
<a href="#" target="_blank"><button class="btn btn-block btn-primary">PURCHASE COURSE &rarr;</button></a>

</div>
</div>