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

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

新規登録して質問してみよう
ただいま回答率
85.51%
float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

332閲覧

float指定が動いてくれません

hinana0227

総合スコア7

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/08/22 07:37

###前提・実現したいこと
div内の画像を横並びにしたいのですがfloat指定しても並んでくれません

###発生している問題・エラーメッセージ
指定しても縦に並んだ挙句divの真ん中の方によっていってしまいます

###該当のソースコード Htmlは現在こうなっています ```<div class="imagearea"> <figure><img src="xxxx.gif" width="186.45px" height="139.83px"><figcaption>Gif animation</figcaption></figure> <figure><img src="x.jpg" width="186.45px" height="139.83px"><figcaption>jpg material-1</figcaption></figure> <figure><img src="xx.jpg" width="186.45px" height="139.83px"><figcaption>jpg material-2</figcaption></figure> <figure><img src="xxx.jpg" width="186.45px" height="139.83px"><figcaption>jpg material-3</figcaption></figure> <figure><img src="xxxx.jpg" width="186.45px" height="139.83px"><figcaption>jpg material-4</figcaption></figure> <figure><img src="xxxxx.jpg" width="186.45px" height="139.83px"><figcaption>jpg material-5</figcaption></figure> </div> 現在のCSS ```figure { float: left; margin: 0px 7px 7px 0px; background-color: none ; } figure img { display: block; margin: 0px 0px 3px 0px; } figcaption { font-size: 0.9em; text-align: center; } div.imagearea:after { content: ""; clear: both; display: block; }

###試したこと
色々検索にかけてみたサイトの方ではこのコードでしっかりfloat指定もできていたので
どうしようもなくこちらで質問させていただきました

###補足情報(言語/FW/ツール等のバージョンなど)
htmlとCSSはbracketをつかって打っています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/08/22 07:46

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
x_x

2017/08/22 07:53

CSSの最初が切れているようですが?
m.ts10806

2017/08/22 07:54

コードブロックが正しく囲えていないようですので質問投稿画面のプレビューを見ながら調整してください。
guest

回答1

0

ベストアンサー

試しにそのCSSの最初の行に
figure { を追加したら横並びになりました

投稿2017/08/22 07:56

morix

総合スコア96

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hinana0227

2017/08/22 08:03

質問に不備があったようですみませんでした。 figure{ を追加してみたところちゃんと動いてくれました 回答本当にありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問