如何在背景中保留饼图菜单？

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

每个页面的原型都是这样的

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

上面使用PageLayout时得到的结果是： 但我期望的结果是：

有没有办法达到我期望的结果？提前谢谢！

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;