Question

我在Wordpress上使用自定义程序来设置不同的布局，并更改侧边栏的位置。该脚本的工作方式如下：它将浮动设置为侧边栏，左侧或右侧。但是当侧边栏设置在左侧时，它会低于内容（因为内容在float:left;上）

结构就像这样

<div class="home">
  <div class="content" style="float:left;">
    <?php get_template_part('loop'); ?>
  </div>

  <div class="sidebar">
    <?php get_sidebar(); ?>
  </div>
</div>

在我的标题中

    <?php
    $sidebar_position = get_theme_mod('sidebar_position');
    ?>
    <style>
      #sidebar-primary {float:  <?php echo $sidebar_position; ?>;}
    </style>

侧边栏位置的部分脚本：

$wp_customize->add_setting('sidebar_position', array());
$wp_customize->add_control('sidebar_position', array(
  'label'      => __('Sidebar position', 'Blog'),
  'section'    => 'layout',
  'settings'   => 'sidebar_position',
  'type'       => 'radio',
  'choices'    => array(
    'left'   => 'left',
    'right'  => 'right',
  ),
));

如何自动更改内容相对于侧边栏的位置？简单的CSS还是我需要在脚本中添加一些东西来设置相反的浮动位置到内容？

Answer 1

如果要通过css float left将侧边栏位置设置为内容，则必须将侧边栏放在内容之前。所以你可以检查这样的设置：

<div class="home">
    <?php if ($sidebar_position == 'left') { ?>
        <div class="sidebar">
            <?php get_sidebar(); ?>
        </div>
    <?php } ?>

    <div class="content" style="float:left;">
        <?php get_template_part('loop'); ?>
    </div>

    <?php if ($sidebar_position == 'right') { ?>
        <div class="sidebar">
            <?php get_sidebar(); ?>
        </div>
    <?php } ?>
</div>

设置相对于侧边栏的内容位置

1 个答案: