With the following jQuery code I am trying to use to set the height to both the columns.

$(document).ready(function() {
    var maxHeight = 0;
    var entryNumber = 1;
    var prevEntrySelector = null;
    $(".story-entry").each(function(){
    alert('Hello');
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
       if ((entryNumber % 2) == 0) {
      // Even entry.
      // Set height of previous entry and this entry to maxHeight.
      $(this).height(maxHeight);
      prevEntrySelector.height(maxHeight);
      // this - this selector - this story entry
      maxHeight = 0;
       }
       prevEntrySelector = $(this);
       entryNumber ++;
    });

    $(".entry-selector").height(maxHeight);
});

This code doesn't work on this page. Below is the reference page.

https://knackshops.com/pages/spread-joy-message

What I did so far is as seen below with unnecessary space after the content

This is the page that I want to make look like this with jQuery.

The full template code for this page:

<?php 
$hero = get_field('hero');
$hero_h1 = $hero['hero_-_h1'];
$hero_h2 = $hero['hero_-_h2'];
$background = $hero['hero_-_background_options'];
$image = $background['background_-_image'];

$link_text = get_field('link_text');
$link_to_contest = get_field('link_to_contest');

$story = get_field('story');
?>

<?php get_header(); ?>

<div class="default-flex-hero relative">
  <div class="inside">
    <div class="row mb0 pt pb">
    <?php if($image): ?>
      <div class="col col-xs-12 col-md-2 col-lg-2 mb0">
          <picture>
            <source media="(max-width: 480px)" srcset="<?php echo($image['sizes']['small']); ?>">
            <source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
            <source media="(max-width: 1280px)" srcset="<?php echo($image['sizes']['large']); ?>">
            <source srcset="<?php echo($image['sizes']['xlarge']); ?>">
            <img src="<?php echo($image['sizes']['xlarge']); ?>" alt="<?php echo $image['alt']; ?>" />
          </picture>
        </div>
      <?php endif; ?>
      <div class="hero-col col col-xs-12 col-md-10 col-lg-10 mb0">
              <h1 class="mb0 color-tan-dark">
                <?php if( $hero_h1 ): echo $hero_h1; endif; ?>
              </h1>
              <?php if( $hero_h2 ): ?>
              <h2 class="mb0 mt2 alt-heading h4">
                <?php echo $hero_h2; ?>
              </h2>
              <?php endif; ?>
        </div>
    </div>
  </div>
</div>

<div class="contest-link">
  <div class="wrap-x">
    <div class="inside">
      <div class="row">
        <div class="contest-link-text col col-xs-12">
        SHARE YOUR OWN STORY <a href="<?php echo $link_to_contest; ?>">HERE</a>
        </div>  
      </div>
    </div>
  </div>
</div>

**<div class="contest-story">
  <div class="wrap-x">
    <div class="inside">
      <div class="row">
        <div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story); ?></div>  
      </div>
    </div>
  </div>
</div>**

<?php get_footer(); ?>

You can do with css just add these line

.contest-story-text > div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.story-entry {
    height: auto !important;
}

@media only screen and (max-width: 600px) {
    .story-entry {
            width: calc(100% - 22px) !important
    }
}

这篇关于如何使用jQuery将两列的高度设置为它们中的最高值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！