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

我可以将两个

div

对齐，只需将它们的

显示设置为
内联块
，并使用相同的
行高
，如下所示：


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

.container {
  display: flex;
  align-items: flex-end;
}


我也可以使用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();

var fitSizes=函数（）{
var h=0；
$（'h1'）。每个（函数（）{
如果（h<$（this.outerHeight（））h=$（this.outerHeight（）；
//选择最大高度
});
$（'h1'）。每个（函数（）{
$（本图）。室外照明（h）；
//将所有h1高度设置为最大高度
});
};
fitSizes（）；

但由于某些原因，我不想使用
js
或
jquery
。有没有“CSS

唯一”的方法可以实现这样的效果

您可以使用，您可以通过在外部div的兄弟姐妹周围制作一个容器来设置它们，并执行如下操作：

.container {
  display: flex;
  align-items: flex-end;
}

---

如果这不能满足您的需求，您也可以尝试查看

align items:baseline修复它。只需看看flexbox。
使用flexbox需要什么


.root{
显示器：flex；
高度：300px；
边框：2件纯黑；
}
.集装箱{
显示器：flex；
/*位于容器底部*/
页边顶部：自动；
/*在容器内扩散*/
柔性生长：1；
/*对齐行中的项目并垂直居中*/
弯曲方向：行；
证明内容：中心；
}
.栏目{
显示器：flex；
保证金：自动5px 5px；
填充：20px；
/*在容器内扩散*/
柔性生长：1；
/*对齐列中的项目，并将内容放置在底部*/
弯曲方向：立柱；
证明内容：柔性端；
边框：2件纯蓝；
}
.行{
保证金：5px；
填充：10px；
边框：1px纯红；
文本对齐：居中；
}

第一排
第一排
第二排
我在这里想到的任何解决方案似乎都很粗糙，这类问题通常也是如此。总有一种情况，他们会崩溃。一个程序化的方法，无论多么臃肿和丑陋，肯定会给你你想要的

我将假设页眉和内容的长度都是不同的，一行或多行页面上可能不止2个

自上而下进近//固定收割台高度

上面的方法没有理由不适用于嵌套的div。不过，如果您要将样式应用于h1，我会将其包装起来。如果在h1上设置跨线的线高度，将导致多行中的每一行都具有该线高度。将标题包装成div，并给它一个静态高度，这样，如果有背景之类的样式，就不会受到“边距”的影响


.包装纸{
高度：2.5雷姆；
线高：2.5雷姆；
文本对齐：底部对齐；
//flex方法也有效
}
h1{
线高：1rem；
}
...
标题
同侧眼线


自下而上的方法//固定内容

如果这些组件的“锚定点”位于页面底部，那么这样做会更好。如果您的内容长度不同，您可以固定容器和内容的高度

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


.集装箱{
文本对齐：底部对齐；
}
h1{
线高：1rem；
}
.内容{
高度：15雷姆；
溢出：省略；
}
...
标题
同侧眼线

Flexbox是一款非常有用的新产品。它只是越来越受欢迎

这可以解决许多不同的问题。比如你的理由问题。
下面是一个简单的小代码，它显示了问题的答案：

HTML:

<div class="container">
  <div class="flex-item">
    Item
  </div>
  <div class="flex-item">
    Item
    <br>
    Item
  </div>
  <div class="flex-item">
    Item
    <br>
    Item
    <br>
    Item
  </div>
</div>

.container {
  display:flex;
  justify-content: space-between;
  border: 1px solid #333; 
 }

.flex-item {
  width: 33%;
  text-align: center;
  background: #120321;
  color: #fff;
}

以下是Chris Coyier关于Flexbox属性的解释的链接：

我个人发现它对学习更多关于flexbox的知识非常有用

可以根据基线设置样式，可以反转元素，使其在垂直和水平方向上具有相同的高度。这是非常令人兴奋的，因为现在我们可以通过一些黑客修复。（就像使用信任我的JS一样，到目前为止，你不是唯一一个这样做的人！）
谢谢你的关注，但我有两个不同的div，我想要的对齐基线在这个div内。正如我所知，flexbox根据其子对象自己的基线对齐其子对象，而不是该子对象内部的标题。这不是我想要的。这里有一个例子：有太多的事情要考虑，但还不清楚。如果你不知道这些事情，你如何帮助自己知道你正在给出最好的答案。。。这让我很焦虑，哈哈。Flexbox在最简单的场景中解决了这个问题，但是什么时候场景才是“简单的”？如果我给我的标题设置了静态高度，我应该手动设置任何不可能的屏幕大小。我认为当我们谈论动态内容时，除了javascript之外没有其他方法：）谢谢你的回答。Flexbox可以解决很多问题，但这不是我想要的，你提到的小提琴也不能解决我的问题。谢谢你的回答，但我认为没有css解决方案可以完全解决我的问题。事实上，你是对的。我想我误解了这个问题，直到再看一遍。实际上，您所说的是在单独的元素中匹配头的基线。我把它看作是一个不断变化的因素。我道歉。如果我找到了解决办法，我一定会编辑我的帖子。