我在这里从事一个项目：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 →</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 →</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 →</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 →</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向我展示如何修复它。
最佳答案
给这些框指定一个父级，并将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 →</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 →</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 →</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 →</button></a>
</div>
</div>