语义UI分段的浮动属性使用

Question

在这种情况下，我试图让一个段向左和向右浮动。我可能对花车的工作原理有基本的误解。我不知道为什么正确的细分行事会如此。

为了清楚起见，左边用蓝色突出显示，右边用红色突出显示。

也许分段不是这里的解决方案？

这是我的布局组件：

return (
    <Container fluid>
      <Navbar />
      <Segment floated={"left"} style={{
          height: "65vh",
          marginLeft: "1rem",
        }}
      >Left Floating Segment</Segment>

      <Segment style={{
          height: "80vh",
          margin: `0 auto`,
          width: "60vw",
          padding: `0 1.45rem`,
        }}>{children}</Segment>

      <Segment floated={"right"} style={{
          height: "65vh",
          marginRight: "1rem",
        }}>Right Floating Segment</Segment>

      <Footer />
    </Container>
  )

Answer 1

[我发现将这些段放在带有display: flex的容器中足以使它们起作用。

<Container style={{display: 'flex'}}> </Container>