セマンティックUIリアクション：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を参照してください。