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