Semantic-UI-React: заголовок карты с 2 столбцами

Я хочу, чтобы заголовок карты был обычным текстом вместе с изображением рядом.

  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!. Как я могу разместить их рядом, выровняв текст по левому краю и выровняв изображение по правому краю? Настоящее изображение здесь


reactjs javascript semantic-ui-react semantic-ui
person Mendes    schedule 18.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это с помощью 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>

Кстати, если вы хотите, чтобы компонент изображения был слева, вы можете использовать компонент заголовка, см. примеры.

person Oleksandr Fediashov    schedule 18.06.2017