フロートのクリアについて
下記のように設定しているのですが、<p class="mp0" style="clear:both; "></p>でフロートをクリアしています。
このやり方以外でフロートを解除する方法はあるでしょうか?
(dlの中でpを使うのはあまり良くない?ようなので)
.blocks にclear:bothを設定しても、dl全体の高さが認識されないようで、ボーダーがボックスの下にきてくれません。
ちなみに、class"mp0"となっているのは下で記載はしていませんがマージンとパディングを0に設定しています。
<div id="special_area">
<p class="mp0"><img src="*****"></p>
<dl class="blocks">
<dt class="blocks_ico"><a href="#"><img src="***"></a></dt>
<dd class="blocks_text">
<p class="blocks_catch"><a href="#">あああ</a></p>
<p class="blocks_title"><a href="#">いいい</a></p>
<p class="blocks_com"><a href="#">ううう</a></p>
<p class="blocks_go"><a href="#"><img src="***"></a></p>
</dd>
<p class="mp0" style="clear:both; "></p>
</dl><!-- blocks -->
<dl class="blocks">
<dt class="blocks_ico"><a href="#"><img src="***"></a></dt>
<dd class="blocks_text">
<p class="blocks_catch"><a href="#">かかか</a></p>
<p class="blocks_title"><a href="#">ききき</a></p>
<p class="blocks_com"><a href="#">くくく</a></p>
<p class="blocks_go"><a href="#"><img src="***"></a></p>
</dd>
<p class="mp0" style="clear:both; "></p>
</dl><!-- blocks -->
</div><!-- special end -->
css
#special_area{
float:right;
width:390px;
}
.blocks{
padding:15px 20px;
border-bottom:dotted 1px #bbb;
}
.blocks_ico{
float:left;
width:85px;
height:85px;
padding:0;
}
.blocks_text{
float:right;
margin:0;
width:250px;
}
.blocks_catch{
margin:0;
line-height:1.2;
font-weight:bold;
color:#333;
}
.blocks_title{
margin:0;
font-weight:bold;
font-size:160%;
font-size:16px;
color:#333;
}
.blocks_com{
margin:3px 0;
line-height:1.1;
color:#333;
}
.blocks_go{
margin:0;
}
No.3ベストアンサー
- 回答日時:
まず、<p class="mp0" style="clear:both; "></p>ですが位置的に絶対に書けません。
これはアウトです。dl要素をせっかく使っているので、
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
とするのではなく
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
としましょう。
こうすればpの代わりの位置に丁度dtがきます。
なので、dtにclearを指定します。
dlにborder-bottomを指定されているので代わりにddにborder-bottomを指定されるとよいと思います。
蛇足ですが、dl要素はあくまで定義リストなのでdtの内の画像にはalt属性が必要だと思います。
もしかしたらdl要素ではなく、単純にul要素だったりh1~h6とp要素だけでマークアップする方が最適なマークアップなんじゃないでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
個別にリンクの色を変える方法
-
liリストタグの背景色に色がつ...
-
[HTML] selectの線を非表示に...
-
.section1.section2 という書き...
-
HP作成(ワッパーを中心に)
-
DreamWeaver 正規表現での連番付与
-
CSS, リンクの色を一部変えるに...
-
idの中のid指定
-
レスポンシブデザインのテンプ...
-
classとidの名前の付け方
-
CSSを多用すると遅くなる?
-
CSSに同じclass名がいっぱい‥。...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
<div id="container">の使いか...
-
初歩的ですが・・・
-
htmlのolやulなどlistにtitleや...
-
CSS:animation開始位置の設定
-
ホームページの下にあるcopy ri...
-
マウスオーバーでポップアップ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
brにクラスをつけてcssでdispla...
-
透過背景を解除するにはどうす...
-
htmlのid属性って必要なの?
-
ページの左右の余白(枠外)に...
-
スタイルシートでデザイン
-
フロートのクリアについて
-
CSS, リンクの色を一部変えるに...
-
サイトにjQueryが使用されてい...
-
外部css定義したclassをht...
-
Bootstrap3でcontainerがずれる...
-
CSSで、DIV#hogeという記述は何...
-
スタイルシートで、id属性の中...
-
一部のリンクの下線を消す
おすすめ情報