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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

1582閲覧

htmlでのfloatプロパティについて

banianizm

総合スコア92

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/02/13 12:52

すみません。練習でHPを作成しているのですが、floatプロパティを使っても横並びになりません。環境の問題なのかそれ以外の問題なのか、まだ始めたばかりで見当がつきません。
よろしければお力を貸してください。

-HTML-
</div>

<div class="footer"> <div class="footer-left"> <ul> <li>池羽商店について</li> <li>お客様へのお願い</li> <li>おもてなし</li> </div> <div class="like-box"> <iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FProgate%2F742679992421539&amp;show_faces=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:300px;" allowTransparency="true"></iframe> </div>

-css-

.footer {
width:1300px;
clear: left;
border-top:1px solid black;
backgroud-color:lightblue;
}
.footer-left{
float:left;
background-color:yellow;
}
.like-box {
float: left;
}

宜しくお願い致します。

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

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

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

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

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

guest

回答2

0

ベストアンサー

ブロック要素はwidthを指定していないと親要素と同じ横幅になっています。
なので、現在はいわゆるfloatのカラム落ち状態になっている感じです。
.footer-left.like-boxに適当なwidthを当てればfloatされると思いますよ。

投稿2016/02/13 13:06

rossi46hiro

総合スコア992

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

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

banianizm

2016/02/15 18:42

ありがとうございました。 解決致しました。
guest

0

質問とは関係ありませんが、facebookのlike-boxは2015年6月23日に廃止されました。
今はPage Pluginという新しいものに変わっていますので、
そちらを埋め込む前提で進めたほうがよいのではないかと思いますよ。
参考:FacebookページのLike Box廃止に!代りのPage Pluginを設定する方法

投稿2016/02/13 19:55

aKusano

総合スコア3763

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

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

banianizm

2016/02/15 18:40

ありがとうございました。 解決致しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問