Semantic-UI-React：帶有2列的卡頭

Question

我想將卡頭與圖像並排放在一起。

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！'標題。我如何將它們並排放置，左對齊文本並右對齊圖像？

Answer 1

你可以用CSS做到這一點，但我會建議在那裏使用網格。

<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> 

順便說一句，如果你想有左一個圖像組件，您可以使用頭組件，請參閱examples。