解決済
「align="left"」指定された画像の横でblockquoteタグを使うと画像が無視されてborderが出てしまう
この記事で起きています。一つ目の点線四角がトップ画像の存在を無視して横幅いっぱいに表示されています。画像の下にあって見えなせんが。
HTMLやCSSは素人で、先日まではテーブルタグを使っていました。blockquoteタグを使うのが引用では決まりの様なのでそうしたかったのですが、この仕様はどうにかなるモノなのでしょうか？
align="left"指定された画像の大きさに合わせ、blockquoteで呼び出した点線が横幅を変えるようには出来るのでしょうか？
CSS内の記述を変え、blockquote他の設定をいじる位の技術はあるつもりです。
よろしくお願いします。
回答(1)
1.
そうすると画像の横に引用部分はでませんが、画像の下にもぐりこむことはないと思います。
ありがとうございました。
また新しい技^^が1つ増えました。
コメント(4)
>>1
tani_masaruさん、回答ありがとうございます。
clear属性の使い方はわかりました。コレは知らなかったので使う機会はこれからあるでしょうが今回の目的には合いません。
回り込みに合わせて、CSSのblockquoteで指定したborder線の横幅を変えることが出来るか？です。
まだそれほど調べてないんですが、有名なブログでもこのまま使っているので「こういうモノなのかな？」とも思っているんですが、回避する方法があるならその方が良いと思っています。
引き続きよろしくお願いします。
divやpなどのブロック要素全般に言えることですが、
前の要素に回り込み指定がある場合、
内部のインライン要素（テキストなど）は前の要素を避けるように配置されますが、
ブロック自体は飽くまで前の要素のエリアを含む矩形になります。
（エリアとしては前の要素と重なる状態）
そのためボーダーが前の要素と重なって背面に回ってしまうわけです。
回避するには前の要素を避けるようにマージンを入れます。
今回のケースではblockquoteに左マージンのスタイルを追加すればいいと思います。
ただこれだと、
途中で回り込み部分が終了する場合でも左マージンが入ってしまいます。
画像部分を切り欠くようにL字形にはできません。
display:inline;としてインライン要素に変更する手もありますが、
ボーダーが入るので望み通りにならないですね。
>>#3
imqさん
コメントありがとうございます。
つまりはHTMLやCSSの仕様なんですよね。
だったらこのまま行っちゃいます。
>>1
tani_masaruさんが教えてくれた<br clear="all">で
回避できるし、そもそも写真の横で引用をしないように心がければ済むことですし。
ありがとうございました。
つまりはそうなんです＾＾
また何かありましたら気軽にどうぞ。
