Javascript 我如何使这3列设计与文本对齐的工作?

Javascript 我如何使这3列设计与文本对齐的工作?,javascript,html,css,Javascript,Html,Css,基本上,我正在使用Wordpress制作一个网站,有3个栏目,都有一个图片、一个标题和一个段落。标题的长度各不相同,有些是2行,有些是3行,所以有些有更多的高度,我想把标题下的3段排成一行 因此,我的代码基本上获取所有标题,存储最大高度,然后将所有标题高度设置为最大高度,以排列标题下的段落。在调整大小时,如果在页眉中添加了更多行,则效果很好,但如果需要的行数较少,则所有内容下都会有空白,因为我只使用css的最大高度 既然我在重复自己的话,有什么建议可以解决这个问题或者改进我的代码吗 以下是到目前

基本上,我正在使用Wordpress制作一个网站,有3个栏目,都有一个图片、一个标题和一个段落。标题的长度各不相同,有些是2行,有些是3行,所以有些有更多的高度,我想把标题下的3段排成一行

因此,我的代码基本上获取所有标题,存储最大高度,然后将所有标题高度设置为最大高度,以排列标题下的段落。在调整大小时,如果在页眉中添加了更多行,则效果很好,但如果需要的行数较少,则所有内容下都会有空白,因为我只使用css的最大高度

既然我在重复自己的话,有什么建议可以解决这个问题或者改进我的代码吗

以下是到目前为止我得到的信息:

function resizeHeaders() {
    let blurbHeaders = document.querySelectorAll('.et_pb_module_header');
    let headerHeight = 0;

    blurbHeaders.forEach((header) => {
        if(header.offsetHeight > headerHeight) {
            headerHeight = header.offsetHeight;
        }
    });

    blurbHeaders.forEach((header) => {
        header.style.height = `${headerHeight}px`;
    });
}
    
jQuery(window).resize(function() {
    resizeHeaders();
});
试试这个

.col容器{ 显示器:flex; 宽度:100%; } 上校{ 弹性:1; 填充:16px; } 第1栏 你好,世界

第2栏 你好,世界

你好,世界

你好,世界

你好,世界

第3栏 其他一些文本

其他一些文本

其他一些文本

其他一些文本

您需要使用CSS display:flex属性。因此,可以对齐并保持柱的相同高度。