Semantic-UI-React：卡片 header 有 2 列

Question

我希望卡片 header 是普通文本和图片并排显示。

  import logo from './images/logo.svg';

  render() {
    return (
      <div>
        <Card>
          <Card.Content className='left aligned'>
            <div className="two column headers">
              <Card.Header>Hello World!</Card.Header>
              <Image src={logo} size='tiny'/>
            </div>
            <Card.Meta>Item</Card.Meta>
            <Card.Meta>Category</Card.Meta>
          </Card.Content>

          <Card.Content>
            <Card.Description>10 units of test.</Card.Description>
          </Card.Content>
        </Card>    
     </div>
    );

图片出现在 'Hello World!' header 之后。如何将它们并排放置，左对齐文本并右对齐图像？

Answer 1

您可以使用 CSS 执行此操作，但我建议您在此处使用 Grid。

<Card.Header>
  <Grid>
    <Grid.Column width={12}>Hello World!</Grid.Column>                
    <Grid.Column width={4}>
      <Image src={logo} size='tiny'/>
    </Grid.Column>
  </Grid>
</Card.Header>

顺便说一句，如果你想在左边有一个Image组件，你可以使用Header组件，见examples。

Semantic-UI-React：卡片 header 有 2 列

Semantic-UI-React: Card header with 2 columns

javascript

reactjs

semantic-ui

semantic-ui-react