使用 CSS / CSS3 自动调整所有元素的高度（使高度相等）答案

【问题标题】：Auto adjust height (make equal height) of all elements using CSS / CSS3使用 CSS / CSS3 自动调整所有元素的高度（使高度相等）
【发布时间】：2011-07-04 05:16:37
【问题描述】：

我有一个内联显示的导航项的无序列表，每个项都共享相同的容器宽度（即 320 像素）。

我面临的问题是，由于宽度有限，文本可能会超过两行。但是是否有可能使所有导航项的超链接高度相同，应该比其他项高？

背景颜色应用于超链接，因为它需要在内容处于活动状态时处于活动状态。

这是我的小提琴：http://jsfiddle.net/calebo/W7sYZ/1/

【问题讨论】：

有什么特别的理由不将样式应用于表格单元格元素吗？即jsfiddle.net/zKQVM
存在需要应用于超链接的活动/非活动状态。查看更新的小提琴。
虽然这不能回答您的问题，但如果导航始终保持固定高度不是更好吗？即调整宽度，直到没有文本超过一行。还是要求宽度？
我希望所有导航项目的宽度始终扩展容器的整个宽度，因此在项目上使用表格单元格值。不喜欢不灵活的固定高度，如果它们的文本超过 2 行，布局就会中断。

标签： html css navigation

【解决方案1】：

$(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');

});

http://jsfiddle.net/W7sYZ/2/

【讨论】：

我正在寻找一个非 js 的解决方案。根据我的问题标签。 :)
这不是 CSS 解决方案。

【解决方案2】：

.module-controls { display: table; }
.module-controls .tab-set { display: table-row; }

不带 JS 的多浏览器变体：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

【讨论】：

这行得通，尽管它会扩大
以防止换行。如果 OP 不介意某些
比其他的更宽，这让我投票支持非 js 解决方案。

不幸的是，容器的宽度是可变的，因此我需要

元素始终展开以适应全屏。

【解决方案3】：

答案很简单：

将背景颜色添加到包含您希望具有相同高度的所有元素的外部元素。

http://jsfiddle.net/W7sYZ/4/

【讨论】：

不可接受。背景颜色应用于超链接，因为它需要在内容处于活动状态时处于活动状态。
我看不出问题出在哪里。您只需将不同的背景颜色分别应用于链接..就像您通常一样。您的活动未显示的原因是因为在 css 代码中它前面有 .tabbed 所以它无法找到您分配它要查找的元素（.tabbed .module-controls .tab-set li.active a 应该是 .module-controls .tab-set li.active a) 唯一要做的就是移除顶部和底部的多余空间。

<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>

.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; }