Блог

С помощью следующей разметки я могу разместить два div рядом, как показано на рисунке 1, но только в Chrome. На рисунке 2 показано, как Firefox обрабатывает HTML. Это известная проблема, которую я пропустил? Как мне это исправить?

 <div style="background-color: #ffcc33;">
    <div class="entry-content" style="float: left;">
        <h3>Full Article: <a href = "<?php the_field('url'); ?> "target="_blank">Link</a></h3>
        <div id="summary_headline">
            <h3>Summary</h3>
        </div>
        <?php
            the_field('generated_summary');
            
                           wp_link_pages( array(
                               'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'inbox' ),
                               'after'  => '</div>',
                           ) );
                           ?>
        <p class="read-more"><a href="<?php the_permalink(); ?>" target="_blank" class="button"><?php echo esc_html('Read More', 'inbox'); ?></a></p>
    </div>
    <div style="float: left;  background-color: #eee;">
        <div id="wordmap_display" style="background-color: #a0a0a0;" >
            <h3>Word Map</h3>
            <div id="wordmap_chart"></div>
        </div>
        <div id="sa_results_display" style="background-color: #f5baff;">
            <h3>Sentiment Analysis Results</h3>
            <canvas id="sa_chart"></canvas>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>
  

CSS

 .page .post-content .entry-content, .single-post .post-content .entry-content {
    height: auto;
    overflow: hidden;
    background: #42ffec;
    width: 60%;
}
.post-content .entry-content {
    height: 60vh;
    overflow: hidden;
    position: relative;
    text-align: justify;
}
div {
    display: block;
}
  

РЕДАКТИРОВАТЬ: заставил его работать. Я установил свой самый внешний div в overflow: hidden и из своего второго внутреннего div, удалил float:left и добавил overflow:hidden

Используйте display: flex свойство. Поддерживается в основных браузерах.

 .main-container {
  background-color: #ffcc33;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.more-details {
  float: left;  
  background-color: #eee;
}  

 <div class="main-container">
    <div class="entry-content" style="float: left;">
        <h3>Full Article: <a href = "#" target="_blank">Link</a></h3>
        <div id="summary_headline">
            <h3>Summary</h3>
        </div>
        Dynamic markup from PHP
        <p class="read-more"><a href="#" target="_blank" class="button">Read More</a></p>
    </div>
    <div style="more-details">
        <div id="wordmap_display" style="background-color: #a0a0a0;" >
            <h3>Word Map</h3>
            <div id="wordmap_chart"></div>
        </div>
        <div id="sa_results_display" style="background-color: #f5baff;">
            <h3>Sentiment Analysis Results</h3>
            <canvas id="sa_chart"></canvas>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>