使 WordPress 列大小相同

Question

我已经在 WordPress 网站上工作了几个小时，但我一辈子都无法弄清楚这个问题。我的页面上有 4 列，它们的大小取决于内容。我需要所有 4 个尺寸相同。我已经向每个列添加了一个类，并尝试在 CSS 中手动设置高度，但没有任何变化。这是我项目的VC代码。我的

col-height

类是否瞄准了正确的位置？如果是，我的 CSS 应该是什么样子才能实现这一目标？感谢您的帮助！

[vc_row]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Handguns" add_button="bottom" btn_title="Learn More"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Bladed Objects" add_button="bottom" btn_title="Learn More"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Rifles" add_button="bottom" btn_title="Learn More"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Incendiary Devices" add_button="bottom" btn_title="Learn More"]<p>[/vc_cta]
    [/vc_column]
[/vc_row]

Answer 1

我已经用工作解决方案更新了这个答案。请按照以下步骤操作。

---

如何在 Visual Composer 中将列设置为相等高度？

1。 VC设置

为了将行内的列设置为等高，您必须导航到 Row 参数窗口并选中 Equal height 选项处于活动状态。该行中的所有列都将具有相同的高度并与最长的列对齐。

来源：WPBakery 页面生成器知识库

---

2。页面内的 VC 代码

[vc_row equal_height="yes" el_id="lh-custom"]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Handguns" add_button="bottom" btn_title="Learn More" el_class="col_height"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Bladed Objects" add_button="bottom" btn_title="Learn More" el_class="col_height"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Rifles" add_button="bottom" btn_title="Learn More" el_class="col_height"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Incendiary Devices" add_button="bottom" btn_title="Learn More" el_class="col_height"]<p>&nbsp;</p>[/vc_cta]
    [/vc_column]
[/vc_row]

---

3. Functions.php 中的 jQuery 代码

function lh_vc_same_height_cols() {
    ?>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery(document).ready(function() {
                    var maxHeight = -1;

                    jQuery('#lh-custom .col_height').each(function() {
                        maxHeight = maxHeight > jQuery(this).height() ? maxHeight : jQuery(this).height();
                    });

                    jQuery('#lh-custom .col_height').each(function() {
                    jQuery(this).height(maxHeight);
                });
            });
        });
        </script>
    <?php
}
add_action( 'wp_footer', 'lh_vc_same_height_cols' );

来源：WPMU DEV论坛

---

输出

Answer 2

至少适用于 wordpress 6.3 版本；不确定这个特定设置可以追溯到多久以前。

使用“可视化编辑器”的另一个选项是设置堆栈元素的“最大高度”。如果您可以在“Columns”或“Column”元素上执行此操作，那就太好了，但目前还不能。

---

编辑器设置

1. 在Column内添加一个“Stack”元素；出于设计原因，我使用 Stack 而不是 List
2. 对于每个列堆栈元素，转到“样式”->“最小高度”
3. 将其设置为任意尺寸模式（px、%、em、rem 等），然后定义该尺寸的值

• 警告：这仅定义了最小高度，而不是最大高度；所以在你的设计方法中考虑到这一点。

---

最终结果

1. 250px 最小高度
2. 17 rem 最小高度