コード ```書籍のサンプルホームページを作っているのですが、意図しない文章まで右側にきてしまいます ・すばる ・ぐれ子 ・ねず子 の3匹のネコの文章を作っているのですが、1匹目の「すばる」の文章を画像の右側に持ってくると、2匹目の文章の一部まで右側にきてしまいます。 何故でしょうか? よろしくお願いします <h2>我が家のにゃんこ紹介</h2> <div id="subaru" class="frame"> <h3>・すばる <span class="cat-type male">(白キジトラ・オス)</span></h3> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。<br /> 段ボール箱のかどや柱で爪どきをするのが大好き。</p> <img src="img/cat126.jpg" width="320" height="320" alt="すばる" class="ph" /> <dl class="data"> <dt>特徴:</dt> <dd>大きな目と耳。まがったしっぽ。</dd> <dt>性格:</dt> <dd>マイペース。</dd> </dl> <p class="more"><a href="cats/subaru.html">もっとみる→</a></p> </div> <div id="gureko" class="frame"> <h3>・ぐれ子<span class="cat-type female">(灰色毛皮・メス)</span></h3> <p>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色のネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。<br/> しゃがれ声と貫禄のある顔つきからは想像できないほど甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p> <img src="img/tomDSC08406.jpg" width="320" height="320" alt="ぐれ子" /> <dl > <dt>特徴:</dt> <dd>しゃがれ声、ゴロゴロすりすり攻撃</dd> <dt>性格:</dt> <dd>甘え上手、腹黒</dd> </dl> <p class="more"><a href="cata/gureko.html">もっと見る→</a></p> </div> <div id="nezuko" class="frame"> <h3>・ねず子<span class="cat-type female">(白茶トラ・メス)</span></h3> <p>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン(涙)。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫</p> <img src="img/nekotodokimashita171027.jpg" width="320" height="200" alt="ねず子" /> <dl > <dt>特徴:</dt> <dd>片目、小顔</dd> <dt>性格:</dt> <dd>プライド高い、人間に対しては女王様。</dd> </dl> <p class="more"><a href="cata/nezuko.html">もっと見る→</a></p> </div> </div> ※CSS @charset "utf-8"; /*ウインドウ背景色の設定*/ body{ background-color:#fbf9cc; background-image:url(img/ameman170920008_TP_V1.jpg); background-repeat:repeat-x; } /*リンク色の設定*/ a{ color:#df4839; } a:hover{ color:#ff705b; } /*コンテンツ全体枠の設定*/ #wrap{ width:960px; margin:40px auto; padding:40px 80px; border:#f6bb9e 1px solid; background-color:#fff; } /*ページタイトルの設定*/ h1{ color:#6fbb9a; text-align:center; font-size:250%; } h1 span{ color:#d0e35b; } /*大見出しの設定*/ h2{ color:#6fbb9a; border:#94c8b1 1px dotted; border-left:#d0e35b 10px solid; padding:5px 20px; margin-bottom:0; } /*情報データ見出しの設定*/ dt{ font-weight:bold; } /*リード文領域の設定*/ #lead{ border-top:#6fbb9a 1px dotted; border-bottom:#6fbb9a 1px dotted; padding:15px; } /*「もっと見る」 リンクの設定*/ .more{ text-align:right; padding-right:20px; background-image:url(img/icon-arw01.png); background-repeat:no-repeat; background-position:right center; } /*毛皮・性別情報 (共通)*/ .cat-type{ font-size:80%; font-weight:normal; } /*性別による色分け*/ .cat-type.male{ color:#2793a7; } .cat-type.female{ color:#df972F; } /*フレームの設定*/ .frame{ margin:20px 0; padding:35px 30px 30px 30px; background-image:url(img/ameman170920008_TP_V2.jpg); background-repeat:repeat-x; background-color:#fbf9cc; } /*写真と特徴データの設定*/ .ph{ float:left; margin-right:30px; } .data{ float:left; }
質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
回答1件
あなたの回答
tips
プレビュー