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

【问题标题】：Set content position relative to the sidebar设置内容相对于侧边栏的位置
【发布时间】：2016-02-24 16:36:12
【问题描述】：

我在 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 还是我需要在脚本中添加一些东西来为内容设置相反的浮动位置？

【问题讨论】：

我可以通过将 display:inline-block 添加到内容和侧边栏来修复它。我仍然想知道是否有更好的解决方案。
很可能，您应该在侧边栏容器上设置overflow: hidden，但我只是在这里猜测一下，因为这取决于您的 WP 主题。如果您想要一个正确的答案，您需要在测试环境中重现问题，例如jsfiddle。

标签： php css wordpress

【解决方案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>

【讨论】：