画像の横に回りこみして並べるには？

解決済

質問者：princess00
質問日時：2009/11/03 03:24
回答数：3件

最近htmlを勉強し始めたのですが、初心者なため行き詰ってしまいました・・・。
どうかご教授お願い致します。

■■■■コメント
■画像■コメント
■■■■コメント

上記の様に右にコメントを表示させるように出来るのですが、
これを２列にして複数画像とコメントを載せるには
どのようにしたらよいのでしょうか？

■■■■コメント　■■■■コメント　　　
■画像■コメント　■画像■コメント
■■■■コメント　■■■■コメント

■■■■コメント　■■■■コメント
■画像■コメント　■画像■コメント
■■■■コメント　■■■■コメント

　

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： syagain
回答日時：2009/11/03 12:53

<div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div>

<div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div>
<br clear="left">
<div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div>
<div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div>

CSS（スタイルシート）でfloat:leftを指定すると、左から順番に詰められます。
＊<img>のalignでコメントを回り込みさせる
＊<div>のfloatで、[画像とコメントの一式]を左寄せに流し込みます。

＊一括指定できるならば、そうした方がいいかもしれません。
<head>
<style type="text/css">

</style>
</head>

※参考URL：floatの仕組み

参考URL：http://airrat.blog103.fc2.com/blog-entry-392.html

- 0
- 件

通報する

この回答へのお礼

とても参考になりました。
ありがとうございました。

通報する

お礼日時：2009/11/11 21:45

No.2

回答者： noname#119957
回答日時：2009/11/03 12:49

CSSデザインの場合の例を示します。

画像サイズ・パディングの調整などは、ｃｓｓで調整できます。

■HTML

<div class="box">
<div class="inner-left">
<img src="" >
<p class="comment">コメント</p>
</div>

<div class="inner-right">
<img src="" >
<p class="comment">コメント</p>
</div>
</div>
<div class="dummy"></div>
<div class="box">
<div class="inner-left">
<img src="" >
<p class="comment">コメント</p>
</div>

<div class="inner-right">
<img src="" >
<p class="comment">コメント</p>
</div>
</div>
<div class="dummy"></div>
</body>
</html>

■css定義（○○○.css）
HTMLのhead内に
<link href="○○○.css" rel="stylesheet" type="text/css" />
と書けばcssファイルがリンクされて適用されます。
cssファイルの内容：

* {
margin:0px;
padding:0px;
}
.box {
clear:both;
width:500px;
margin-right:auto;
margin-left:auto;
}
.inner-left {
float:left;
width:250px;
}
.inner-right {
float:left;
width:250px;
}
.box img {
display:block;
float:left;
padding-right: 10px;
}
.box .comment {
display:block;
float:left;
padding-right: 10px;
}

.dummy {
clear:both;
display:block;
height:1px;
width:1px;
line-height:1px;
}

- 0
- 件

通報する

この回答へのお礼

なるほど。
参考になりました～
ありがとうございました。

通報する

お礼日時：2009/11/11 21:46

No.1

回答者： diszo
回答日時：2009/11/03 03:43

的外れかもしれませんが、

テーブルで表示してみるのはいかがでしょうか？

例：
<table border="0">
<tr>
<td>画像</td>
<td>こめんと</td>
<td>画像</td>
<td>こめんと</td>
</tr>
<tr>
<td>画像</td>
<td>こめんと</td>
<td>画像</td>
<td>こめんと</td>
</tr>
</table>