掲示板/スタイルシート質問板/過去ログ/一覧/ きれいに並べられないのです。

0 名前： ギンペイ ： 2007/01/30（火） 11:34 ID:yHtCGFgU sub-v7: お世話になります。

両側の写真と”ＴＥＳＴ”文字をきれいに[左写真、ＴＥＳＴ、右写真]と並べたいのですが
この記述ではだめなのでしょうか。
アドバイスをいただければありがたいのですが。
宜しくお願い板します。

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<meta http-equiv="content-script-type" content="text/javascript">

<STYLE TYPE="text/css">

</style>

</head>
<body>

<div id="con">

<IMG class="a " src="http://www.nizm.co.jp/topexplain/bluegemmine.gif">

TEST,TEST,TEST<br>
,TEST,TEST,TEST,

<img class="b " src="http://www.nizm.co.jp/i-jewelry/toruko.gif">
</div>

</body>
</html>

1 名前： key-child ： 2007/01/30（火） 11:34 ID:1gIhoGyI sub-bK

それぞれの関係がよくわかりませんが・・・
取りあえずこんな感じかな？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja" dir="ltr">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <title>html test</title>

 <style type="text/css">
<!--

body { 
 color: #000000;
 font-weight: bold;
 margin-top: 18px;
 margin-left: 20px;
}

#con {
 width: 400px;
 height: 100px;
 border: solid 1px #FF0018;
}

p {
 margin: 0;
}

.a, .c {
 float: left;
}
.b {
 float: right;
}
.a, .b {
 width: 130px;
 height: 100px;/* .aは103px */
}
.c {
 width: 140px;
}

-->
 </style>

</head> 

<body>

<div id="con">
 <p class="a"><img src="http://www.nizm.co.jp/topexplain/bluegemmine.gif" alt="代替文"></p>
 <p class="c">てすと、てすと、てすと、てすと</p><!-- TESTでは自動改行されないため変更 -->
 <p class="b"><img src="http://www.nizm.co.jp/i-jewelry/toruko.gif" alt="代替文"></p>
</div>

</body>

</html>

CSS無効とかも考えて・・・
TESTが２つの画像の説明なら[画像][説明][画像]ではなく[画像][画像][説明]の方がいいかも

2 名前： key-child ： 2007/01/30（火） 11:34 ID:8GUFlW2K sub-DR

すみません、
誤解を受けそうだったので補足

> [画像][説明][画像]ではなく[画像][画像][説明]
レイアウトの方ではなくソースの方です。

 <p class="a"><img src="http://www.nizm.co.jp/topexplain/bluegemmine.gif" alt="代替文"></p>
 <p class="b"><img src="http://www.nizm.co.jp/i-jewelry/toruko.gif" alt="代替文"></p>
 <p class="c">てすと、てすと、てすと、てすと</p><!-- TESTでは自動改行されないため変更 -->

3 名前： ギンペイ ： 2007/01/30（火） 11:34 ID:002r9kJU sub-v7: key-child さん

アドバイスありがとうございます。そうですね、[a,b,c]をブロック要素で
囲んで[float]で回り込みを指せればすっきり解決できますね、ありがとうございました。

私の説明不足でした、お聞きしたかったのは、上記の記述ではなぜ３要素[仮にa,b,c]
がきれいに横に並ばないのでしょうか、何所が間違っているのでしょうか、という質問
だったのです。

左側の[img]にfloat: left;を設定すると[テスト]文字は指示通り右に回りこみます。
しかし右側の[img]にfloat: right;を設定してもキチンと３要素が並んでくれません。
記述自体、また横並びにする方法としては間違っていないような気がするのですが。
もし、原因がお分かりでしたらお教え願いたいのですが。

なにとそ宜しくお願いいたします。

4 名前： key-child ： 2007/01/30（火） 11:34 ID:8GUFlW2K sub-DR

img要素はインライン要素なので改行が有効になります。
ですので、下記のような状態になります。

┌──────────────┐
│　　　　　　#con　　　　　　│
│┌────┐test<br>　　　　│
││ a-img　│test┌────┐│
││　　　　│　　│ b-img　││

5 名前： カヅサツ ◆ThCi95HEzw ： 2007/01/30（火） 11:34 ［URL］ ID:O5hEMlpW sub-r2

<IMG class="a " src="http://www.nizm.co.jp/topexplain/bluegemmine.gif">
TEST,TEST,TEST<br>
,TEST,TEST,TEST,
<img class="b " src="http://www.nizm.co.jp/i-jewelry/toruko.gif">

float は「後続の」テキストに対して回り込むのですから、b.imgに指定しても仕方ありません。
あえて言うなら、「TEST…TEST」をマークアップして、それに float(とwidth)を指定します。

あるいは以下のようにするかです。

<IMG class="a " src="http://www.nizm.co.jp/topexplain/bluegemmine.gif">
<img class="b " src="http://www.nizm.co.jp/i-jewelry/toruko.gif">
TEST,TEST,TEST<br>
,TEST,TEST,TEST,

6 名前： ギンペイ ： 2007/01/30（火） 11:34 ID:002r9kJU sub-v7: key-child さん

カヅサツさん

いつも御回答本当にありがとうございます。
簡潔な説明をしていただいてよく分かりました。
まだ勉強不足であることもよく分かりました。

感謝いたします。