Gizport
1 回答
0
Share (facebook)
176
view
全般

HP作成でリストと画像について 現在HPを作っています リストを左側...

HP作成でリストと画像について 現在HPを作っています
リストを左側につくり
右側に画像をおきたいなとおもい
リストに回り込みを設定したところ
文字は右側に表示されたのですが
画像はリストの下に表示されどうやっても
右側に表示されません
画像の場合他の設定を書かなければいけないのですか?

下にリストのCSS書いておきます

/* --- 新着情報エリア --- */
div.update {
width: 500px;
font-size: 80%;
float: left;
}

/* 見出し */
div.update h3 {
margin: 0 0 5px;
font-size: 100%;
}

/* --- 新着リスト --- */
div.update dl {
width: 100%;
height: 170px;
overflow: auto;
margin: 0;
background-color: #f9f9f9;
border-top: 1px #c0c0c0 dotted;
border-bottom: 1px #c0c0c0 dotted;
}

/* --- 日付エリア --- */
div.update dt {
width: 6.7em;
float: left;
padding: 7px 0 6px 3px;
line-height: 120%;
}

/* --- 本文エリア --- */
div.update dd {
margin: 0;
padding: 7px 3px 6px 6.6em;
border-bottom: 1px #c0c0c0 dotted;
line-height: 120%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

CSSだけではわからない場合は
その旨を書いていただき
他に何の情報が必要かを教えていただけると光栄です
Yahoo!知恵袋 4688日前
コメントする
お気に入り
1
質問者が選んだベストソリューション
>ihsttcさん

>CSSだけではわからない場合は

>文字は右側に表示されたのですが
>画像はリストの下に表示されどうやっても

htmlもないとちょっと無理ですね。
dtとddを並べたいんだろうなとは思いますが、
文字と画像がどこにどう書かれているか分からないと。
両方ともひとつのddの中ですか?

あ~と、もしかして<div class="update"></div>の横に画像、ですか?
divと画像の横幅(+余白など)が大きすぎる(ブラウザの横幅が二つを並べて表示するには足りない)のでは?



>リストと画像に関係あるところのhtmlです

これだと、500px幅のdivの中、h3の下に、dlとpを並べたい、とも取れますが。
それともh3、dlの横にp(画像)でしょうか?
いずれにせよ、dlの横幅が100%なので、並べようがないです。
例えば、dlとpを並べたいなら、
dlの横幅とpの横幅をあわせて500px以下になるようそれぞれに指定し(余白なども計算する)、
dlにfloat、divにclearFixをつけます。

dlにclearFixが付いているということは、dlの中身、dt、ddがfloatされている、ということになります。
(dtとddを並べるのであれば、dlにclearFixは正解。)

例:
<div class="update clearFix">(半角スペースを空けて複数のclassを指定できます)
<h3>更新履歴</h3>
<dl class="">
<dt>2010/08/01</dt>
<dd>test</dd>
</dl>
<p><img class="img1" alt="[写真]" src="1.jpg" /></p>
<p><img class="img2" alt="[写真]" src="2.jpg" /></p>
</div>
.update { width:500px; }
.update h3 { width:100%; }
.update dl { width:240px; float:left; border:1px solid #000000; }
.update p.img1 { width:250px; float:left; border:1px solid #ff0000; }

h3とdl(500px)の横にpとしたいなら、h3とdlをグループにしたboxをつくり、そのboxとpを並べます。
例:
<div class="update clearFix">
<div>
<h3>更新履歴</h3>
<dl class="">
<dt>2010/08/01</dt>
<dd>test</dd>
</dl>
</div>
<p><img class="img1" alt="[写真]" src="1.jpg" /></p>
<p><img class="img2" alt="[写真]" src="2.jpg" /></p>
</div>
.update { width:900px; } /* div(500px)とpの幅と余白を合せた幅以上の数値 */
.update div { width:500px; float:left; border:1px solid #000000; }
.update p.img1 { width:390px; float:left; border:1px solid #ff0000; }
Yahoo!知恵袋 4688日前
シェア
 
コメントする
 

参考になったと評価
  このQ&Aは参考になりましたか?

Share (facebook)
その他の解決方法を知っていますか?
回答する
全般
27
Views
質問者が納得>ihsttcさん >CSSだけではわからない場合は >文字は右側に表示されたのですが >画像はリストの下に表示されどうやっても htmlもないとちょっと無理ですね。 dtとddを並べたいんだろうなとは思いますが、 文字と画像がどこにどう書かれているか分からないと。 両方ともひとつのddの中ですか? あ~と、もしかして<div class="update"></div>の横に画像、ですか? divと画像の横幅(+余白など)が大きすぎる(ブラウザの横...
4688日前view27

関連製品のQ&A