写真を2枚縦に並べて、文章を回り込ませるのは意外と簡単だったけど、横に2枚並べて、文章の回り込ませるにはちょっと複雑。
floatの感覚がちゃんとわかっていないとだめだ。写真を左におくなら、写真1、写真2、文章を左から並べていく感じ。右なら右から並べる感じ。それを注意しながら、空間のとり方などを指定していきます。
写真の1枚目2枚目の指定が異なります。
DIV.photo_L、DIV.photo_L2が左に置く場合
DIV.photo_R、DIV.photo_R2が右におく場合
（表示される写真の1枚目と2枚目の並び順が、６．と７．とで逆になっているのに注意してください。）
以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。（画像は用意してください。）
サンプルはここにあります。
<HTML>
<HEAD>
<TITLE>写真にタイトルを付けて配置する-4</TITLE>
<STYLE>
<!--
HR{
clear: both;
}
SPAN {
font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_L {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 0px 0px;
font-weight: bold;
}
DIV.photo_L2 {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 10px 0px 0px;
font-weight: bold;
}
DIV.photo_R {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 0px 10px;
font-weight: bold;
}
DIV.photo_R2 {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 0px 0px;
font-weight: bold;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>写真にタイトルを付けて配置する-4</H2>
<HR>
<DIV CLASS="photo_L"><IMG SRC="img_1.jpg" WIDTH="200" HEIGHT="150" ALT="左1/2"><br>左 1/2</DIV>
<DIV CLASS="photo_L2"><IMG SRC="img_2.jpg" WIDTH="200" HEIGHT="150" ALT="左2/2"><br>左 2/2</DIV>
<P ALIGN="left">
<SPAN>
６．写真横に２枚(左）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝ここまで
</P>
<HR>
<DIV CLASS="photo_R2"><IMG SRC="img_1.jpg" WIDTH="200" HEIGHT="150" ALT="右1/2"><br>右 1/2</DIV>
<DIV CLASS="photo_R"><IMG SRC="img_2.jpg" WIDTH="200" HEIGHT="150" ALT="右2/2"><br>右 2/2</DIV>
<P ALIGN="left">
<SPAN>
７．写真横に２枚(右）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝ここまで
</P>
</DIV>
</DIV>
</BODY>
</HTML>
floatの感覚がちゃんとわかっていないとだめだ。写真を左におくなら、写真1、写真2、文章を左から並べていく感じ。右なら右から並べる感じ。それを注意しながら、空間のとり方などを指定していきます。
写真の1枚目2枚目の指定が異なります。
DIV.photo_L、DIV.photo_L2が左に置く場合
DIV.photo_R、DIV.photo_R2が右におく場合
（表示される写真の1枚目と2枚目の並び順が、６．と７．とで逆になっているのに注意してください。）
以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。（画像は用意してください。）
サンプルはここにあります。
<HTML>
<HEAD>
<TITLE>写真にタイトルを付けて配置する-4</TITLE>
<STYLE>
<!--
HR{
clear: both;
}
SPAN {
font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_L {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 0px 0px;
font-weight: bold;
}
DIV.photo_L2 {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 10px 0px 0px;
font-weight: bold;
}
DIV.photo_R {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 0px 10px;
font-weight: bold;
}
DIV.photo_R2 {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 0px 0px;
font-weight: bold;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>写真にタイトルを付けて配置する-4</H2>
<HR>
<DIV CLASS="photo_L"><IMG SRC="img_1.jpg" WIDTH="200" HEIGHT="150" ALT="左1/2"><br>左 1/2</DIV>
<DIV CLASS="photo_L2"><IMG SRC="img_2.jpg" WIDTH="200" HEIGHT="150" ALT="左2/2"><br>左 2/2</DIV>
<P ALIGN="left">
<SPAN>
６．写真横に２枚(左）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝ここまで
</P>
<HR>
<DIV CLASS="photo_R2"><IMG SRC="img_1.jpg" WIDTH="200" HEIGHT="150" ALT="右1/2"><br>右 1/2</DIV>
<DIV CLASS="photo_R"><IMG SRC="img_2.jpg" WIDTH="200" HEIGHT="150" ALT="右2/2"><br>右 2/2</DIV>
<P ALIGN="left">
<SPAN>
７．写真横に２枚(右）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝ここまで
</P>
</DIV>
</DIV>
</BODY>
</HTML>
