是什么导致包装纸破裂？

Question

我不确定我是否应该在 wordpress stack but if you go to the single.php 中 post 在我的自定义 wordpress 主题上，您会看到，如果您使浏览器的宽度大约小于 1200 像素，您就可以向右水平滚动。不应有额外的 space 来允许水平滚动，因为页面内容在包装器 div 中。

我查看了源代码，看起来 wordpress 通过 the_content() 生成的内容正在创建 div 破坏包装的内容？

这是 single.php 的代码当我再次删除 <?php the_content(); ?> 时，结构问题不存在了。

<?php get_header(); ?>

<div class="page-section clear">
    <!-- post thumbnail -->
    <div class="single-image-anchor">
        <?php if (has_post_thumbnail( $post->ID ) ): ?>
        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
        <a class="single-image" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" style="background-image: url('<?php echo $image[0]; ?>')">
        </a>
        <?php endif; ?>
    </div>
    <!-- /post thumbnail -->
    <div class="container clear">
        <main role="main">
        <!-- section -->
        <section>
        <?php if (have_posts()): while (have_posts()) : the_post(); ?>
        <div class="wrapper">
        <!-- article -->
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>



            <!-- post title -->
            <h1 class="single-title">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
            </h1>
            <!-- /post title -->

            <!-- post details -->
            <span class="single-date"><?php the_time(get_option('date_format')); ?></span>  

            <div class="single-text">

                <?php the_content(); ?>

                <br />
                <a href="<?php echo get_permalink(18); ?>" class="back-article">
                    <i class="fa fa-arrow-circle-left"></i> News
                </a/>
            </div>


        </article>
        <!-- /article -->
        </div>

    <?php endwhile; ?>

    <?php else: ?>


    <?php endif; ?>

    </section>
    <!-- /section -->
    </main>

    </div>
</div>
<?php get_footer(); ?>

Answer 1

这是 Facebook 分享按钮。 span 包装它和 iframe 当前设置为宽度 900px:

<span style="vertical-align: bottom; width: 900px; height: 25px;">
   <iframe name="f2a1624528" width="900px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?app_id=1526849080927795&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F7r8gQb8MIqE.js%3Fversion%3D41%23cb%3Dfa87d2a78%26domain%3Dmichaeljeromeinprogress.themichaelsanger.com%26origin%3Dhttp%253A%252F%252Fmichaeljeromeinprogress.themichaelsanger.com%252Ff291a9dcc8%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fmichaeljeromeinprogress.themichaelsanger.com%2Fnye-bte-shows-on-sale-now%2F&amp;locale=en_US&amp;ref=below-post&amp;sdk=joey&amp;share=true&amp;width=900" style="border: none; visibility: visible; width: 900px; height: 25px;" class=""></iframe>
</span>

将它们设置为喜欢 100px，因为这些按钮反正很小。

Answer 2

每当遇到此类问题时，请执行以下操作：

div { border: 1px solid red }

然后查看页面内的所有 div 块。注意那些触及右边缘的。

如果进入Chrome，可以删除元素节点。当我删除 fb 社交插件节点时，水平滚动条消失了。所以看看那个...

是什么导致包装纸破裂？

What is causing wrapper to break?

html

wordpress

wrapper