使用 CSS / CSS3 自动调整所有元素的高度(使高度相等)

发布于 11-18 13:57 字数 279 浏览 3 评论 0原文

我有一个内联显示的导航项目的无序列表,每个项目都共享相同的容器宽度(即 320px)。

我面临的问题是,由于宽度有限,文本可能会超出两行。但是,如果一个导航项比其他项高,是否可以使所有导航项超链接的高度相同?

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

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

I have an unordered list of navigation items that are displayed inline, each of these item share the same equal width of the container (ie. 320px).

The issue I'm facing is there is a potential that the text might runover two lines because of the limited width. But is it possible to make all navigation items hyperlink the same height should one be taller than the others?

The background color is applied to the hyperlink because it needs an active state when content is active.

Heres my fiddle: http://jsfiddle.net/calebo/W7sYZ/1/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

难如初2024-11-25 13:57:37
$(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/

$(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/

花间憩2024-11-25 13:57:37
.module-controls { display: table; }
.module-controls .tab-set { display: table-row; }

不带 JS 的多浏览器变体: http://matthewjamestaylor.com/博客/等高列-跨浏览器-css-no-hacks

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

Multibrowser variant without JS: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

匿名。2024-11-25 13:57:37

答案很简单:

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

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

Answer is simple:

Put background color to the outer element that holds all the elements that you want to have equal height.

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

南冥有猫2024-11-25 13:57:37

这里我得到了使用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;
}

here i got the solution for equal height div using flex method.

<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;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文