Question

我正在使用WordPress网站并开发博客帖子页面。我已经设置好了，所以你左边的帖子和右边的侧边栏。但我已经将侧边栏代码放在页面顶部，并带有逻辑，以确定用户想要侧栏的哪一侧。

我试图解决的问题是，如果侧边栏代码位于移动设备的顶部，它将在博客帖子之前显示。所以我找到了一个使用表格功能来帮助解决这个问题的方法。这适用于除博客帖子之外的所有页面，当我调整大小时，缩略图图像显示为完整大小，尽管我将其限制为容器的最大宽度。

PHP / HTML：

<?php get_header(); ?>

<div class="wrapper">   

    <?php if ( get_theme_mod( 'realestatepro_sidebar_position', esc_attr__( 'right', 'realestatepro' ) ) == "left" )  

        { echo '<div class="col-xs-12 col-sm-3 col-md-3 sidebar left-sidebar">'; }

    else

        { echo '<div class="col-xs-12 col-sm-3 col-md-3 sidebar right-sidebar">'; }

    ?>

        <?php get_sidebar(); ?>

    </div>

    <div class="col-xs-12 col-sm-9 col-md-9 feature">

        <div class="col-xs-12 col-sm-12 col-md-12 blog-article">

            <?php 

            if( have_posts() ):

                while( have_posts() ): the_post(); ?>

                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <?php the_title('<h3 class="entry-title">','</h3>' ); ?>
                                <small>Post in:<?php the_category(' '); ?>, by <?php the_author_link(); ?> on <?php the_time('F jS, Y'); ?></small>
                            </div>

                        <?php if( has_post_thumbnail() ): ?>

                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <?php the_post_thumbnail('full'); ?>
                            </div>

                        <?php endif; ?>

                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <?php the_content(); ?>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <hr>
                            <div class="col-xs-6 text-left"><?php previous_post_link(); ?></div>
                            <div class="col-xs-6 text-right"><?php next_post_link(); ?></div>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <hr>
                            <?php 
                                if( comments_open() ){ 
                                    comments_template(); 
                                }                               
                             ?>
                        </div>

                    </article>

                <?php endwhile;

            endif;

            ?>

        </div>

    </div>

</div>

<?php get_footer(); ?>

CSS：

.blog-article img {
    height: auto;
    max-width: 100%;
    margin: 10px 0px;
}

.left-sidebar {
    float: left;

}

.right-sidebar {
    float: right;
}

@media (max-width: 767px) {

    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        float: none;
    }

    .wrapper {
        display: table;
        float: right;
    }

    .sidebar {
        display: table-footer-group;
    }

    .feature {
        display: table-header-group;
    }

}

Answer 1

您可以尝试固定的表格布局：

.wrapper {
  display: table;
  width: 100%; /*added*/
  table-layout: fixed; /*added*/
}

当然，图像应设置为：

img {
  max-width: 100%;
  height: auto;
}

https://jsfiddle.net/n7bpz5sj/1/

Answer 2

使用flexbox属性order使用.wrapper { display: flex; flex-direction: column; } .sidebar { order: 2; } .feature { order: 1; }进行布局的正确方法是需要更改div的顺序。在您的情况下，响应式布局看起来像这样：

{{1}}

CSS表排列元素顺序但图像不再响应

2 个答案: