semantic-ui-react 中的网格对齐问题

Question

我正在使用 semantic-ui-react 创建一个简单的类似新闻的布局，旁边有图像和文本，但无法解决空白的 space 问题。

下面是屏幕截图以及计算面板中的详细信息。我无法找出包含图像的第一个单元格中空白 space（在标有绿色的填充区域之外）的原因。

这就是我的 JSX 代码的样子 -

import * as React from "react";
import { Grid, Image, Container, Header } from "semantic-ui-react";

export const SummaryList: React.SFC = () => {
  const items = Array.from(Array(10).keys());
  return (
    <div>
    {items.map((i) => 
    <Grid key={i} celled stackable>
      <Grid.Row centered columns={2}>
        <Grid.Column width={3}>
          <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/FIFA_series_logo.svg/1280px-FIFA_series_logo.svg.png" />
        </Grid.Column>
        <Grid.Column width={10}>
          <Container >
            <Header as="h3">quick brown fox scored a goal</Header>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
              commodo ligula eget dolor...
            </p>
          </Container>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  )}
  </div>);
};

Answer 1

我重新创建了你的代码，但我没有任何白色 space。

所以这可能是由您的主体样式引起的，请尝试将边距和填充设置为 0，或者如果您有容器组件容纳它，则该容器上的样式也可能是问题。

Answer 2

下面多出来的space是因为第二列的文字太长，而左边多出来的space是因为semantic-[=37=的方式] 排列列。

我做了以下事情来修复左边的 space -

将 Grid 移出了循环
一旦我明白 semantic-ui 有 16 列，我为文本分配了 12 列 space 容器和 4 列 space 到图像。
删除了不必要的 Container Grid.Column

以下帮助我摆脱了左边多余的 space -

import * as React from "react";
import { Grid, Image, Container, Header } from "semantic-ui-react";

export const SummaryList: React.SFC = () => {
  const items = Array.from(Array(10).keys());
  return (
    <div>
    <Grid key={i} celled stackable>
    {items.map((i) => 
      <Grid.Row centered columns={2}>
        <Grid.Column width={4}>
          <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/FIFA_series_logo.svg/1280px-FIFA_series_logo.svg.png" />
        </Grid.Column>
        <Grid.Column width={12}>
            <Header as="h3">quick brown fox scored a goal</Header>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
              commodo ligula eget dolor...
            </p>
        </Grid.Column>
      </Grid.Row>
  )}
    </Grid>
  </div>);
};

我仍然不确定如何使文本列动态地保持一定大小以确保图像单元格不必拉伸太多。现在我调整了文本大小以对齐不超过图像单元格大小。

semantic-ui-react 中的网格对齐问题

grid alignment issue in semantic-ui-react

javascript

jsx

semantic-ui-react