Question

我不确定是否应该在wordpress stack中发帖，但如果你转到single.php 在我的自定义wordpress主题上，您会看到如果您使浏览器的宽度大约小于1200像素，则可以向右水平滚动。由于页面内容位于包装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社交插件节点时，水平滚动条消失了。所以看看......

什么导致包装破坏？

2 个答案: