我的页面布局涵盖了所有组件

const PageLayout = ({ children, navBar }) => {
  return (
    <section>
      <Container id="content">
        <MenuCricle id='menu' parrentWidth={350} menuData={donutData} childWidth={60} />
        <MenuCricle id='language' parrentWidth={140} menuData={languageData} childWidth={20} />
        {children}
      </Container>
      <Footer>
        <div className="text-center">&copy; 2017. {settings.app.name}.</div>
      </Footer>
    </section>
  );
};


每个页面都有原型,像这样

class SecuritySystemPage extends Component {
  render() {
    return (
      <PageLayout>
       {//some thing to display here}
      </PageLayout>
    )
  }
}


使用上面的PageLayout时得到的结果是:
javascript - 如何将饼图菜单保留在后台?-LMLPHP
但我的预期结果是:
javascript - 如何将饼图菜单保留在后台?-LMLPHP

有什么方法可以达到我的预期结果吗?先感谢您!

最佳答案

这是添加float:right时输出如何显示的演示。


相邻元素环绕浮动的内容。
您可以在浮动元素上添加边距以在其周围留出空间。




.circle{
width:100px;
height:100px;
background:blue;
border:5px solid darkblue;
border-radius:50%;
float:right;
margin:15px;
}

<p>This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works </p>

<p>This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works </p>

<div class="circle"></div>

<p>This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works </p>

<p>This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works </p>

<p>This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works This is random content to show you how float right works </p>

10-05 21:07
查看更多