table-cell bootstrap 列的子级未占据全高
Children of table-cell bootstrap columns not occupying full height
我有 3 张不同的账户卡,每张卡的内容各不相同。我希望所有卡片(位于 col-md-4 class 内)占据列的整个高度。
我从 [this][1] 线程中收集到一种实现方法是使用显示:table。主要问题是我的列中有一个 div,我需要占据列的整个高度。我将那些 divs 设置为 display: inline-block 和 height 到 100% 但 divs 似乎表现得好像 height 被设置为 auto 而不是占据全高
这是我的html:
.container {
display: table;
}
.row {
display: table-row;
height: 100%;
}
.col-md-4 {
display: table-cell;
float: none;
height: 100%;
}
.account {
background: $overlay-color;
text-align: center;
display: inline-block;
margin: 0;
padding: 0;
height: 100%;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="account">
<h1 class="type">MINI ACCOUNT</h1>
<div class="details">
<h2 class="ad">A perfect account to start with!</h2>
<p class="detail">Spreads from 2.3 pips</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">STANDARD ACCOUNT</h1>
<div class="details">
<h2 class="ad">An ideal account for every investor!</h2>
<p class="detail">Spreads from 1.9 pips</p>
<p class="detail">Minimum deposit = 000</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">EXCLUSIVE ACCOUNT</h1>
<div class="details">
<h2 class="ad">An exclusive account for exclusive clients!</h2>
<p class="detail">Spreads from 0 pips</p>
<p class="detail">Minimum deposit = ,000</p>
<p class="detail">Access to Daily Technical Analysis</p>
</div>
</div>
</div>
</div>
</div>
试试 flexbox
.container {
display: table;
}
.row {
display: flex;
}
.col-md-4 {
float: none;
}
.account {
background: rgba(0, 0, 0, 0.34);
text-align: center;
display: inline-block;
margin: 0;
padding: 0;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="account">
<h1 class="type">MINI ACCOUNT</h1>
<div class="details">
<h2 class="ad">A perfect account to start with!</h2>
<p class="detail">Spreads from 2.3 pips</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">STANDARD ACCOUNT</h1>
<div class="details">
<h2 class="ad">An ideal account for every investor!</h2>
<p class="detail">Spreads from 1.9 pips</p>
<p class="detail">Minimum deposit = 000</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">EXCLUSIVE ACCOUNT</h1>
<div class="details">
<h2 class="ad">An exclusive account for exclusive clients!</h2>
<p class="detail">Spreads from 0 pips</p>
<p class="detail">Minimum deposit = ,000</p>
<p class="detail">Access to Daily Technical Analysis</p>
</div>
</div>
</div>
</div>
</div>
我有 3 张不同的账户卡,每张卡的内容各不相同。我希望所有卡片(位于 col-md-4 class 内)占据列的整个高度。
我从 [this][1] 线程中收集到一种实现方法是使用显示:table。主要问题是我的列中有一个 div,我需要占据列的整个高度。我将那些 divs 设置为 display: inline-block 和 height 到 100% 但 divs 似乎表现得好像 height 被设置为 auto 而不是占据全高
这是我的html:
.container {
display: table;
}
.row {
display: table-row;
height: 100%;
}
.col-md-4 {
display: table-cell;
float: none;
height: 100%;
}
.account {
background: $overlay-color;
text-align: center;
display: inline-block;
margin: 0;
padding: 0;
height: 100%;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="account">
<h1 class="type">MINI ACCOUNT</h1>
<div class="details">
<h2 class="ad">A perfect account to start with!</h2>
<p class="detail">Spreads from 2.3 pips</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">STANDARD ACCOUNT</h1>
<div class="details">
<h2 class="ad">An ideal account for every investor!</h2>
<p class="detail">Spreads from 1.9 pips</p>
<p class="detail">Minimum deposit = 000</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">EXCLUSIVE ACCOUNT</h1>
<div class="details">
<h2 class="ad">An exclusive account for exclusive clients!</h2>
<p class="detail">Spreads from 0 pips</p>
<p class="detail">Minimum deposit = ,000</p>
<p class="detail">Access to Daily Technical Analysis</p>
</div>
</div>
</div>
</div>
</div>
试试 flexbox
.container {
display: table;
}
.row {
display: flex;
}
.col-md-4 {
float: none;
}
.account {
background: rgba(0, 0, 0, 0.34);
text-align: center;
display: inline-block;
margin: 0;
padding: 0;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="account">
<h1 class="type">MINI ACCOUNT</h1>
<div class="details">
<h2 class="ad">A perfect account to start with!</h2>
<p class="detail">Spreads from 2.3 pips</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">STANDARD ACCOUNT</h1>
<div class="details">
<h2 class="ad">An ideal account for every investor!</h2>
<p class="detail">Spreads from 1.9 pips</p>
<p class="detail">Minimum deposit = 000</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">EXCLUSIVE ACCOUNT</h1>
<div class="details">
<h2 class="ad">An exclusive account for exclusive clients!</h2>
<p class="detail">Spreads from 0 pips</p>
<p class="detail">Minimum deposit = ,000</p>
<p class="detail">Access to Daily Technical Analysis</p>
</div>
</div>
</div>
</div>
</div>