- 首页
- 前端开发
- 无论内容如何，如何保证三个DIV高度相同
无论内容如何，如何保证三个DIV高度相同
[英] How to ensure three DIV are the same height regardless of content
本文介绍了无论内容如何，如何保证三个DIV高度相同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<div class="col span_1_of_3 articleTeaserBoxColor"><div class="test2n"><div class="imgHolder"><img id="NewsArticle_2790_image" class="imgArtThumb" title="" alt="" src="artOne.png"/></div><div class="textHolder"><div class="textHolderTop"><a href="/template.aspx?id=2790" class="" title="">注意快车道</a></div><div class="textHolderBottom">国家癌症研究所</div>
<div class="col span_1_of_3 articleTeaserBoxColor"><div class="test2n"><div class="imgHolder"><img id="NewsArticle_2792_image" class="imgArtThumb" title=" alt="" src="artThree.png"/></div><div class="textHolder"><div class="textHolderTop"><a href="/template.aspx?id=2792" class="" title="">保持联系</a></div><div class="textHolderBottom">用于与您的提供者互动并跟踪您的医疗保健的工具</div>
<div class="col span_1_of_3 articleTeaserBoxColor"><div class="test2n"><div class="imgHolder"><img id="NewsArticle_2791_image" class="imgArtThumb" title="" alt="" src="artTwo.png"/></div><div class="textHolder"><div class="textHolderTop"><a href="/template.aspx?id=2791" class="" title="">了解抗生素什么时候起作用，什么时候不起作用</a><;/div><div class="textHolderBottom">如果您或您的孩子感染了病毒，抗生素对您或他/她将无济于事</div>
CSS:
.imgArtThumb{最大宽度:100%；高度:自动；}.imgHolder{向左飘浮;显示:内联块；宽度:43%；右填充:2%；高度:100%；}.textHolder{向左飘浮;显示:内联块；宽度:55%；高度:100%；}.textHolderTop{宽度:100%；高度:48%；文本对齐:左；填充底部:2%；溢出:隐藏；}.textHolderBottom{宽度:100%；高度:48%；溢出:隐藏；文本对齐:左；填充底部:2%；}.test2n{文本对齐:左；高度:95%；宽度:95%；填充:2%；溢出:隐藏；}.articleTeaserBoxColor{box-shadow: 插入 0 -1px 1px rgba(0,0,0,0.5), 插入 0 1px 1px rgba(238,146,85,1);}/* 列设置 */.col{显示:块；/*向左飘浮;*/显示:内联块；保证金:1% 0 1% 0；}.col:第一个孩子{左边距:0；}.span_1_of_3 {宽度:32.2%；}/* 分组 */.group:before, .group:after {内容: "";显示:表；}.group:在{之后清楚:两者；}.团体 {缩放:1；/* 对于 IE 6/7 */}/* 部分 */.部分 {清楚:两者；填充:0px；边距:0px；高度:自动；溢出:自动；文本对齐:居中；宽度:100%；}
显示:
如何修改我的 CSS 以确保三个框(带有框阴影的框)的高度与文本最多的框的高度匹配(中间框应该是相同的高度，但由于内容的原因，它会更短).
框内的任何内容，比文本最多的框少，都会有空白，这很好.
这是我想要的:
解决方案
有几种方法和方法，但这里有一个快速的方法:
.col {显示:表格单元格；垂直对齐:顶部:}
演示 http://jsfiddle.net/Lg9y9s93/1
<div class="section group">
<div class="col span_1_of_3 articleTeaserBoxColor">
<div class="test2n">
<div class="imgHolder"><img id="NewsArticle_2790_image" class="imgArtThumb" title="" alt="" src="artOne.png" /></div>
<div class="textHolder">
<div class="textHolderTop"><a href="/template.aspx?id=2790" class="" title="">Care on the Fast Track</a></div>
<div class="textHolderBottom">The National Cancer Institute</div>
</div>
</div>
</div>
<div class="col span_1_of_3 articleTeaserBoxColor">
<div class="test2n">
<div class="imgHolder"><img id="NewsArticle_2792_image" class="imgArtThumb" title=" alt="" src="artThree.png" /></div>
<div class="textHolder">
<div class="textHolderTop"><a href="/template.aspx?id=2792" class="" title="">Stay Connected</a></div>
<div class="textHolderBottom">tool for interacting with your provider and following your healthcare</div>
</div>
</div>
</div>
<div class="col span_1_of_3 articleTeaserBoxColor">
<div class="test2n">
<div class="imgHolder"><img id="NewsArticle_2791_image" class="imgArtThumb" title="" alt="" src="artTwo.png" /></div>
<div class="textHolder">
<div class="textHolderTop"><a href="/template.aspx?id=2791" class="" title="">Know When Antibiotics Work and When They Don't</a></div>
<div class="textHolderBottom">If you or your child has a virus, antibiotics will not help you or him/her</div>
</div>
</div>
</div>
</div>
CSS:
.imgArtThumb
{
max-width: 100%;
height: auto;
}
.imgHolder
{
float: left;
display: inline-block;
width: 43%;
padding-right: 2%;
height: 100%;
}
.textHolder
{
float: left;
display: inline-block;
width: 55%;
height: 100%;
}
.textHolderTop
{
width: 100%;
height: 48%;
text-align: left;
padding-bottom: 2%;
overflow: hidden;
}
.textHolderBottom
{
width: 100%;
height: 48%;
overflow: hidden;
text-align: left;
padding-bottom: 2%;
}
.test2n
{
text-align: left;
height: 95%;
width: 95%;
padding: 2%;
overflow: hidden;
}
.articleTeaserBoxColor
{
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}
/* COLUMN SETUP */
.col {
display: block;
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
.span_1_of_3 {
width: 32.2%;
}
/* GROUPING */
.group:before, .group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 */
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
height: auto;
overflow: auto;
text-align: center;
width: 100%;
}
displays this:
How can I modify my CSS to ensure the three boxes (the one with the box shadow) height matches that of the box with the most text (The middle box should be the same height, but because of content it is shorter).
Any content within a box, which is less than the box with the most text, will have blank space, which is fine.
This is what I would like it to be:
解决方案
There are several ways and methods, but here's a quick one:
.col {
display: table-cell;
vertical-align: top:
}
Demo http://jsfiddle.net/Lg9y9s93/1
这篇关于无论内容如何，如何保证三个DIV高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
