

画像と文字をfloatで横一列に並べたいです。

[code]

    画像　　　　　　　　テキスト
    　　　　　　　　　　テキスト
    
[/code]

大きい画像のようなイメージです。

<https://gyazo.com/482c3bfde93aa748a0db046f111fd086>

HTMLは以下になります。

* * *
[code]

    <body style="margin-top: 24px;">
        <div id="wrap">
        <div class="header"><img src="logo.png">CHEESE DEVELOPMENT</br>GROWTH CEESE</br>CHEESE PERSPECTIVE<br>CHEESE GENERATOR</div>
        <div class="gazou"><img src="bg-cheese.jpg"></div>
        <div class="gazou"><img src="catch.png"></div>
    
[/code]

* * *

CSSは以下になります。

[code]

    }
    body{
      width:100%; /*ページ全体の幅は100%と指定する*/ 
      text-align:center;/*ページ全体を中央揃えにする*/
    }
    #wrap{ 
      width: 960px;    /*全体の幅を指定する*/  
      margin: 0 auto;    /*マージンの指定をする、ブラウザ対策*/
      /*全体を左揃えにする。*/
    }   
    header{
        float:right;
        text-align:right;
    }
    
[/code]

* * *

どなたかアドバイスを頂けますと幸いです。何卒よろしくお願いします。


CC BY-SA 3.0
2016-03-06T06:52:38.190
22847
2016-06-29T06:04:33.643
2016-03-09T09:12:53.640
440
14665
question
html css
cssのfloatについて


CSSでは、class属性への指定方法は「header」ではなくドットが前につき、「.header」となります。以下の書き方を試してください。

[code]

    .header{
      float:right;
      text-align:right;
    }
    
[/code]


CC BY-SA 3.0
2016-03-09T08:54:27.320
22951
2016-03-09T13:06:33.253
2016-03-09T13:06:33.253
76
14710
22847
answer


対象となる画像タグに`float:left;`を記述します。  
floatを使うには可能であればwidthとheightも指定した方が崩れにくくなります。  
そして、floatした親ブロックには必ず`clear:both;`が必須になります。

`overflow:hidden;`は元々の意味ははみ出た部分の処理ですが、ブロック要素の空間位置特定を把握する機能が備わっています。私の書くCSSではほとんどが`overflow:hidden;`してあります。

[code]

    .header img,
    .gazou img {
      float:left;
      overflow: hidden;
      width: 300px; // 画像の横サイズ
      height: 200px; // 画像の縦サイズ
    }
    .wrap {
        overflow: hidden;
        clear: both;
    }
    
[/code]


CC BY-SA 3.0
2016-04-08T14:21:28.410
23854
2016-04-08T14:29:19.437
2016-04-08T14:29:19.437
7973
7973
22847
answer