使用css中子div的基线对齐div

I can align two div's by simply setting their display to inline-block and using same line-heights like shown in the below:

我可以通过简单地将它们的显示设置为内联块并使用相同的线高来对齐两个div,如下所示:

However, what I want is that aligning two nested divs according to the baseline of the inner divs like this:

但是,我想要的是根据内部div的基线对齐两个嵌套的div,如下所示:

I can achieve this also using jquery by taking the longest heading's height and set all the headings' height to this value.

我也可以通过使用jquery获得最长的标题高度并将所有标题的高度设置为此值。

var fitSizes = function () {
    var h = 0;
    $('h1').each( function(){
        if(h < $(this).outerHeight()) h = $(this).outerHeight();
        // select biggest height
    });
    $('h1').each( function(){
        $(this).outerHeight(h);
        // set all h1 heights to the biggest height
    });
};

fitSizes();

But for some reasons I don't want to use js or jquery. Is there any "CSS only" way to achieve something like that?

但由于某些原因,我不想使用js或jquery。是否有任何“仅CSS”方式来实现这样的目标?

4 个解决方案

#1

Any solution I can think of here seems hacky, as are usually problems of this nature. There is ALWAYS a scenario where they will break. A programmatic approach, however bloated and ugly, will definitely give you exactly what you want.

我能想到的任何解决方案似乎都是hacky,通常是这种性质的问题。总有一种情况会破坏。一个程序化的方法,无论多么臃肿和丑陋,肯定会给你你想要的东西。

I'm going to make an assumption that both the header and the content are of varying lengths and there may be more than just 2 on page either on a single line or multiple.

我将假设标题和内容的长度各不相同,页面上可能只有一行或多行。

TOP DOWN APPROACH // fixed header height

TOP DOWN APPROACH //固定标题高度

There's no reason why your approach above won't work for a nested div. I would wrap the h1 if you're applying styles to it though. Setting a line-height on a h1 if it breaks across lines will cause each line in the multiline to have that line height. Wrap the header in a div and give that a static height, that way if the has styles such as a background won't be affected by the "margin".

上面的方法不适用于嵌套div,这是没有理由的。如果你正在应用样式,我会包装h1。如果h1跨越线在h1上设置行高将导致多行中的每一行具有该行高。将标题包装在一个div中,然后给它一个静态高度,如果背景样式不受“margin”的影响。

<style>
    .wrapper {
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: bottom;
        // flex approach works too
    }
    h1 {
        line-height: 1rem;
    }
</style>
...
<div class="container">
    <div class="wrapper">
        <h1>title</h1>
    </div>
    <div class="content">
        <p>lorem ipsum....</p>
    </div>
</div>

"BOTTOM UP" APPROACH // fixed content

“BOTTOM UP”APPROACH //固定内容

This would work better if the "anchor" for these components is the bottom of the page. If your content varies in length you could fix the height of the container and content.

如果这些组件的“锚点”是页面的底部,这将更好地工作。如果您的内容长度不同,您可以修复容器和内容的高度。

<style>
    .container {
        text-align: bottom;
    }
    h1 {
        line-height: 1rem;
    }
    .content {
        height: 15rem;
        overflow: elipsis;
    }
</style>
...
<div class="container">
    <h1>title</h1>
    <div class="content">
        <p>lorem ipsum....</p>
    </div>
</div>

4 个解决方案

#1

更多相关文章

随机推荐