javascript - 如何让饼图菜单保持在后台？

Question

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

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>
  );
};

每个页面都有这样的原型(prototype)

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

使用上面的PageLayout时得到的结果是: 但我的预期结果是:

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

Answer 1

以下演示了添加 float:right 时输出的显示方式。

• 相邻元素环绕 float 内容。
• 您可以向 float 元素添加边距，以在其周围留出空间。

.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>