固定每个盒子的大小 [英] Fix size of every boxes
本文介绍了固定每个盒子的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在这里的一个项目上: https://jsfiddle.net/x3rceway/
我被卡住了，因为即使按钮始终在下方，我也无法使所有盒子的尺寸都固定，即使底部有额外的空间.我期望有这样的东西:
这是我的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>
I am working on a project here: https://jsfiddle.net/x3rceway/
And I am stuck cause I can't make all of my boxes have a fixed size even there is extra space on the bottom for as long the button is always down below. I am expecting to have something like this:
Here's my 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>
Here's my 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%;
}
}
How can I fixed the height of the boxes without affecting my design and the responsiveness? Please use my JSFIDDLE to show me how to fixed it.
解决方案
Give the boxes a parent and assign display: flex; flex-wrap: wrap; to the parent, and the height of the boxes in each row will match.
.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>
这篇关于固定每个盒子的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
