Question

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

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

这就是我的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

我重新创建了您的代码，但没有空格。

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

Answer 2

下面多余空间的原因是第二列中的长文本，而左边多余空间的原因是语义ui排列列的方式。

我做了以下事情来固定左侧的空间-

将Grid从循环中移出
一旦我了解到semantic-ui 带有16列，我为文本分配了12列空间容器和4列图像空间。
免去了 Grid.Column中的Container

以下内容帮助我摆脱了左侧的多余空间-

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

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

语义用户界面反应中的网格对齐问题

2 个答案: