人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

例えば、親要素<div>の子要素を2カラムなどにして、しかもそれらに段差がある場合、全てを親要素内に収めるようにするのに、clearfixという良い方法があると聞き、やってみたのですが、上手く行きません。

このように記述しています。

.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

* html .clearfix {
height: 1%;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

それを、<div id="songInfo" class="clearfix">などのようにしているのですが、
どうも本に書いてあるようにならないのです。

clearfixを指定する際に、親要素にfloat指定をしなければいけないのでしょうか?
正しいclearfixの使い方、使う際の注意などを教えて下さい!!


●質問者: tatami575
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML Overflow カラム ブロック レベル
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● tsukis
●35ポイント

id="songInfo"は親要素ですか?それとも子要素ですか?

clearfixは親要素につける必要があります。

親要素へのfloatも必要ありません。

◎質問者からの返答

id="songInfo"は親要素です。


<div id="songInfo" class="clearfix">
 <ul id="songwriter">
 <li>作詞:あ</li>
 <li>作曲:い</li>
 <li>編曲:う</li>
 </ul> 
 <div id="songPlayBtn">
 <a href="#" class="songPlayBtn01">歌を聞く</a>
 </div>
 </div>

のような感じにすると、id="songPlayBtn"がボックスの外に

飛び出てしまう感じなのです。

id="songwriter"を左に、id="songPlayBtn"を右にフロートさせると、

ボックス内に収まるのですが、それをしなくてもボックスに入るのが、

clearfixのような気がするのですが、、、


2 ● ヨネちゃん
●35ポイント

songwriter は ul に適応するのではなく、その外側に div を作って適応します。

http://acappella.cc/test/clearfix/

◎質問者からの返答

ははーーー。なるほど?。

これは、ulにidを与えるのでなく、

divにidを与えてないと、

clearfixが適応されないということでしょうか??

うーむ。clearfixってムズかしい。。。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ