我有一个内联显示的无序导航项列表,每个项目共享相同宽度的容器(即320px)。
我面临的问题是,由于宽度有限,文本可能会超过两行。但是,是否有可能使所有导航项超链接具有相同的高度,如果一个高于其他导航项?
背景颜色应用于超链接,因为当内容处于活动状态时,它需要处于活动状态。
答案 0 :(得分:2)
$(function(){
var heighest = 0;
$('.tab-set li a').each(function(){
heighest = ($(this).height() > heighest) ? $(this).height() : heighest;
});
$('.tab-set li a').css('height',heighest + 'px');
});
答案 1 :(得分:1)
.module-controls { display: table; }
.module-controls .tab-set { display: table-row; }
没有JS的Multibrowser变体:http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
答案 2 :(得分:0)
答案 3 :(得分:0)
这里我使用flex方法获得了相同高度div的解决方案。
<div class="card-row">
<div class="card">
<div class="card-content">
<p>Sample content</p>
</div>
<a href="#" class="button">button</a>
</div>
<div class="card">
<div class="card-content">
<p>Sample content</p>
<p>Sample content two</p>
<p>Sample content three</p>
<p>Sample content two</p>
</div>
<a href="#" class="button">button</a>
</div>
<div class="card">
<div class="card-content">
<p>Sample content</p>
<p>Sample content two</p>
</div>
<a href="#" class="button">button</a>
</div>
// css
.card {
background: red;
flex: 1;
margin: 0px 15px;
padding: 15px;
display: flex;
flex-direction: column;
}
.card-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: #f5f5f5;
padding: 40px 0px;
width: 100%;
}
.card-content {
background: #fff;
flex: 1;
margin-bottom: 20px;
}