質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • CSS

    7556questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

cssレイアウトのfloatがわかりません。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 165

shoshinsya

score 23

floatがわかりません(^^;

質問1
奇数のピンクで囲った枠を「フロート・ライト」にして、
なぜイメージ画像の右側にまわりこめるのでしょうか?

↑と同じように、boxを2つ作って試してみましたが

<div class="bigbox">
<div class="box1">box1</div>
<div class="box2">box1</div>
</div>

box2を「フロート・ライト」にしても、
box2はbox1の右側にはきませんでした。
ただ水平に親要素枠の右端に寄っただけでした。
box1を「フロート・レフト」にして、
box2を「フロート・ライト」にすると、
スクショのように、左右に横並びにできました。
でも、スクショの場合、イメージ画像には
フロート・レフトにしていないのに、
ピンクで囲った枠はイメージ画像の右側にきています。
なぜでしょうか?

質問2
あと、偶数番目は「フロート・レフト」にしているのに、
なぜピンクの枠は右へまわりこんだのでしょうか?
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/10/13 10:41

    (質問文は編集できます)コードはスクリーンショットでなくコードブロックにテキストでお書きください。

    キャンセル

  • shoshinsya

    2018/10/13 11:29

    アドバイスありがとうございます。

    キャンセル

回答 1

checkベストアンサー

+1

box2を「フロート・ライト」にしても、
box2はbox1の右側にはきませんでした。
ただ水平に親要素枠の右端に寄っただけでした。

box2をfloat:rightにした場合、後続のボックスはbox2が存在しないように配置されます。この場合、box2が右によっているので、左に回り込んだように見えます。しかし、box1は後続ではないので影響を受けません。

イメージ画像には
フロート・レフトにしていないのに、
ピンクで囲った枠はイメージ画像の右側にきています。
なぜでしょうか? 

イメージ画像は指定をしない場合display:inlineとなり、テキストと同様に回り込みます。

あと、偶数番目は「フロート・レフト」にしているのに、
なぜピンクの枠は右へまわりこんだのでしょうか?

:nth-of-type(even)は兄弟要素の偶数番目、という意味ですのが、.containは兄弟要素の中で一つしかないので常に奇数になります。「フロート・レフト」のスタイルは効いていません。
おそらく、.feature:nth-of-type(even) .containと書くべきなのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/13 11:32

    丁寧に説明して頂いて、ありがとうございます。理解できました。

    キャンセル

同じタグがついた質問を見る

  • CSS

    7556questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。