Question

我正在尝试建立一个人造新闻网站，以学习语义UI网格。我正在尝试将垂直方向的行划分为2个较小的列，但它们在水平方向上划分并表现为更多行。如何将行分为两列？

到目前为止，我的布局是将Row分为两列（效果很好）。第二列我分为两行（也可以）。当我想将这些行之一分为2列时，事情变得很奇怪。

样式用于可视化，因为我只是在布置空盒子，因为没有实际内容，因为它只是布局。


    <Grid.Row>
      <Grid.Column
        width="11"
        style={{ height: "500px", border: "2px solid black" }}
      />
      <Grid.Column
        width="5"
        style={{
          border: "1px solid black",
          padding: "0"
        }}
      >
        <Grid.Row style={{ height: "50%", border: "1px solid black" }}>
          <Grid.Column
            width="8"
            style={{ height: "50%", border: "1px solid black" }}
          />
          <Grid.Column
            width="8"
            style={{ height: "50%", border: "1px solid black" }}
          />
        </Grid.Row>
        <Grid.Row style={{ height: "50%", border: "1px solid black" }} />
      </Grid.Column>
    </Grid.Row>

第二列的第一行被分割了，但水平分割为2而不是预期的垂直分割。screenshot of inspctor

Answer 1

类似的东西将帮助您实现目标：

<Grid columns={2}>
  <Grid.Row>
    <Grid.Column style={{ height: "500px", border: "2px solid black" }} />
    <Grid.Column style={{ border: "1px solid black" }} stretched>
      <Grid columns={2} stretched>
        <Grid.Row>
          <Grid.Column style={{ border: "1px solid black" }} />
          <Grid.Column style={{ border: "1px solid black" }} />
          <Grid.Column width={16} style={{ border: "1px solid black" }} />    
        </Grid.Row>  
      </Grid>
    </Grid.Column>
  </Grid.Row>
</Grid>

如您所见，您可以通过将另一个网格嵌入到第二列中来使其工作。使用正确的道具，您甚至不需要指定高度（可见）。

看到它在这里工作： https://codesandbox.io/s/nkkmzl3lz0

为什么Grid.Column水平位于Grid.Row的内侧？

1 个答案: