我使用CSS屬性display: flex。我的內容div不相等。Diisplay flex不伸展div
現在它看起來像：
我想使它看起來像這樣：
HTML
<div class="poplar-boxes">
<div class="popular-boxes-devider"></div>
</div>
<div class="poplar-boxes">
<div class="popular-boxes-devider">
</div>
CSS
.poplar-boxes {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: stretch;
}
.popular-boxes-devider {
flex-basis: 30%
}
Here是JS小提琴
您的Flex項目是高度相同（popular-boxes-devider）。問題是您將邊框設置爲高度不相等的.info。
訣竅是讓他們平等。你需要計算其高度依賴於
下面
/* Added styles */
.effect2,
.icon {
height: 100%;
}
.info {
height: calc(100% - 72px);
box-sizing: border-box;
}
.popular-boxes-devider {
margin-bottom: 15px;
}
/* end Added styles */
.poplar-boxes {
min-height: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.popular-boxes-devider {
flex-basis: 30%;
}
.box > .icon {
text-align: center;
position: relative;
background: #fff;
}
.box > .icon > .image {
position: relative;
z-index: 2;
margin: auto;
width: 88px;
height: 88px;
border: 4px solid white;
line-height: 88px;
border-radius: 50%;
background: #2c2c2c;
vertical-align: middle;
}
.box > .icon:hover > .image {
background: #6CB4C4;
}
.box > .icon > .image > i {
font-size: 36px !important;
color: #fff !important;
}
.box > .icon:hover > .image > i {
color: white !important;
}
.box > .icon > .info {
margin-top: -24px;
background: rgba(44, 44, 44, 0.09);
border: 1px solid #2c2c2c;
padding: 15px 0 10px 0;
}
.box > .icon:hover > .info {
background: rgba(0, 0, 0, 0.04);
border-color: #e0e0e0;
color: white;
}
.box > .icon > .info > h3.title {
font-size: 21px;
font-family: "Quicksand", sans-serif !important;
font-size: 28px;
color: #222;
font-weight: 500;
padding-top: 14px;
}
.box > .icon > .info > p {
font-size: 15px;
color: #666;
line-height: 1.5em;
margin: 20px 10px;
text-align: justify;
}
.box > .icon > .info > .more a {
font-family: "Quicksand", sans-serif !important;
font-size: 12px;
color: #222;
line-height: 12px;
text-transform: uppercase;
text-decoration: none;
}
.box > .icon:hover > .info > .more > a {
color: #fff;
padding: 6px 8px;
background-color: #63B76C;
}
/* .box .space { height: 2px; background-color: #2c2c2c;} */
.btn-default {
font-family: "Quicksand", sans-serif;
background-color: #75b1ae;
color: #FFFFFF;
}
.btn-default:hover {
background-color: #FFFFFF;
color: black;
}
.box .image img {
width: 58%;
/* vertical-align: sub; */
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2 {
position: relative;
}
.effect2:before,
.effect2:after {
z-index: -1;
position: absolute;
content: "";
bottom: 13px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after {
transform: rotate(3deg);
right: 10px;
left: auto;
}<div class="poplar-boxes">
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/startup-registration.png" /></div>
<div class="info">
<h3 class="title">Startup Registration</h3>
<p>
SetyourBiz is a leading business setup services provider in India with 4% market share in highly unorganized sector of small scale consultants.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/foreign-investment.png" /></div>
<div class="info">
<h3 class="title">Foreign Investment (FDI)</h3>
<p>
Foreign investment is regulated by FEMA act, RBI circulars. Our expert advise and prompt services has what made us a renowned face in such sectors.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/licensing-and-registrations.png" /></div>
<div class="info">
<h3 class="title">Licensing & Registrations</h3>
<p>
It is imperative and mandatory for a start up as well as established business to obtain required licenses in order to legally operate.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/intellectual-property-rights.png" /></div>
<div class="info">
<h3 class="title">Intellectual Property Rights</h3>
<p>
Every business, invention, original creative work and design needs to be legally protected to claim the owner's right and safeguard it from infringement
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/accounting-and-tax.png" /></div>
<div class="info">
<h3 class="title">Accounting & tax</h3>
<p>
Accounting and taxes may be complex for you but it is simple for our expert team of CAs.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/secretarial-services.png" /></div>
<div class="info">
<h3 class="title">Secretarial Services</h3>
<p>
Corporate and economic laws may be cumbursome but not for our team of CS, experience excellence here.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/hr-and-legal.png" /></div>
<div class="info">
<h3 class="title">Legal Services</h3>
<p>
Reply to notices like IP Violation Notice, cheque bounce notice, NRI, Immigration Services and Drafting of Legal Documents, Agreements like vendor engagement agreement, confidentiality.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/hr-and-legal.png" /></div>
<div class="info">
<h3 class="title">Labour Laws & Payroll</h3>
<p>
Registration with Labour Department, Creation of PF/ESIC accounts and payment of dues for employees and monthly compliance of TDS are necessary compliance, rest assured with a fee of Rs. 250 per employees.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/funding-and-restructuring.png" /></div>
<div class="info">
<h3 class="title">Funding & Restructuring</h3>
<p>
Registration with Labour Department, Creation of PF/ESIC accounts and payment of dues for employees and monthly compliance of TDS are necessary compliance, rest assured with a fee of Rs. 250 per employees.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
</div>@Inderjeet只是把
.box > .icon > .info {
height: 25em;
}
，或者適合你和解決內部p相應
問題見代碼段時，每個內容的標題包裹在他們之上的圓圓的其保證金頂部，填充和高度分成兩行。爲了解決這個問題，你可以給「標題」或「盒子」一個固定的高度。 – Abinthaha