重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

CSS　リスト　外枠から文字と画像がはみ出る　clearfix

解決済

  • 質問者：hitujiguma
  • 質問日時：
  • 回答数：2件

｜ーーーーーーーーーーーーーーーーーー｜
｜｜ーーーー｜　→1111　→444　→777　｜
｜｜　画像　｜　→2222　→555　→888　｜
｜｜ーーーー｜　→3333　→666　→999　｜
｜ーーーーーーーーーーーーーーーーーー｜

質問お願いします。

上記のように、左に画像があり、その横にリストが3つ並んでいる状態で1ｐｘの外枠をつけたいのですが、
外枠が上一行目の所までしか囲んでくれません。
（※→は矢印の画像です）

CSSの方に入っている.clearfixを使うとよいそうですが、
HTMLのどの部分に入れても上手く表示されません…。
どのように使えばいいのでしょうか？
またどこか間違っている所があるのでしょうか？
よろしければご教授ください。

ソースです。
---------------------------------
html
<div class="box">
<img src="000000.gif" class="imgL"/>
<ul>
<li><img src="img/yajirusi.gif" /> 1111</li>
<li><img src="img/yajirusi.gif" /> 2222</li>
<li><img src="img/yajirusi.gif" /> 3333</li>
</ul>
<ul>
<li><img src="img/yajirusi.gif" /> 4444</li>
<li><img src="img/yajirusi.gif" /> 5555</li>
<li><img src="img/yajirusi.gif" /> 6666</li>
</ul>
<ul>
<li><img src="img/yajirusi.gif" /> 7777</li>
<li><img src="img/yajirusi.gif" /> 8888</li>
<li><img src="img/yajirusi.gif" /> 9999</li>
</ul>
</div>
---------------------------
css
.imgL {
float: left;
margin: 0 10px 10px 0;}
.box {
border:1px #CCCCCC solid;
padding:5px;}
.box ul{
float:left;}

.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

≫widthは固定ですが、heightは可変にしたいです。


これは超難題だ!!
　枠さえ引かなくてよいなら、absoluteで配置すればすむのだが、IEには、XHTML(お示しのソースはXHTML)だと、floatとclearにはさまれたabsoluteで指定されたブロックを抹消する致命的なバグがあって・・。まったく画面から消えるので手の打ちようがない。
　また、内容領域をCSSの仕様書とは異なる解釈をする唯一のブラウザで、firefox,Opera,safariでは、まったく問題ないスタイルシートがIEでは使えない。

　ただ、横幅固定なら、ユーザーエージェントは限定されるのですが、デザイン自体は楽です。
1) 幅を固定したブロック要素をfloatで配置する。
　★内部にabsoluteブロックを置かない(IEのバグ対策)
2) 区切り線<hr />をclearのためにブロック内に置く
　★これは、visibility:hiddenで隠す。
　★これまたIEのバグでhrの高さ(マージン)が小さくならないけどしようがない

[HTML修正部分]
☆ imgはinline要素で<div>内にはそのまま書けるのだが、意味的にも、またCSS出のデザインのためにも必要なため<p></p>で括る
☆リストの画像は「デザインのための画像」で文書構造と指定の意味は持たないためスタイルシート側で記述する。
[注意]
☆これまたIEの対策だが、リストの目印の位置やマージンやパディングがCSSの仕様とは異なるため、具体的に指定しておく必要がある。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>タイトル</title>
<style type="text/css">
<!--
div.box{
border:1px solid red;
position:relative;
margin-left: auto;
margin-right: auto;
width: 620px;
padding:0px;
}
div.box p{
width: 180px;
float:left;
margin: 10px 20px 0px 10px;
}
div.box>ul{
margin: 10px 5px 0px 5px;
width: 120px;
float:left;
padding: 2px;
}
div.box>ul li{
margin-left: 2em;
list-style-image: url(gif/rarw.gif);
padding: 0px;
list-style-position: out-side;
}
div.box hr{
clear: left;
visibility: hidden;
margin:0px;
}
-->
</style>
</head>
<body>
<h1>title</h1>
<div class="box">
<p>
<img src="Sample.jpg" width="180" height="133" alt="**の写真" />
</p>
<ul>
<li> 1111</li>
<li> 2222</li>
<li> 3333</li>
</ul>
<ul>
<li> 4444</li>
<li> 5555</li>
<li> 6666</li>
</ul>
<ul>
<li> 7777</li>
<li> 8888</li>
<li> 9999</li>
</ul>
<hr />
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

わかりやすい説明をありがとうございます。
<hr />をclearに使う方法やバグの事など、質問内容以上の詳しい回答をしていただいて大変感謝しております。
とても勉強になりました。

貴重なお時間をさいてのご回答、本当にありがとうございました＾＾

通報する
お礼日時：2009/01/20 15:43

No.1

  • 回答者： ORUKA1951
  • 回答日時：

私は原則としてfloatは使いません。

ブラウザによって解釈が違うことが多い（特に多数派のIE一つが足を引っ張る)ことと、floatさせる要素は、そのボックスの内容の高さに反映されないからです。
　あなたの場合、上のborderしか表示されないのではなく、内容の高さがゼロだから高さもゼロになるからです。

　解決方法をアドバイスしたいとは思いますが、追加情報をください。

　このブロックは、固定幅なのか可変なのかと、その場合のサイズ
　画像の大きさは一定なのか？
　リストのテキスト幅は？
　テキストの行数と画像の高さ
　　たとえばユーザーが文字を拡大したときには？
　など、
　

この回答への補足

早々にありがとうございます。

widthは固定ですが、heightは可変にしたいです。
左の画像は100×80です。（変更可能）
テキストは5行×横に3つで全部で15項目です。（文字数は1項目6～11文字）

これで情報は足りますでしょうか。
ユーザーの文字サイズ変更にも対応させたいと思っています。

補足日時：2009/01/19 17:58
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報