5カラムでの写真の文字の回りこみに付いて質問です。

締切済

質問者：nitu17
質問日時：2011/07/21 14:06
回答数：4件

ホームページ製作中ですが、トップ、ボトムの間にｂ１、ｂ、ｂ２のブロックを組んでいます。
問題は真ん中のｂに写真を何枚か貼り付けて、テキストをその写真の横に、回りこませたいのですが、img { float: left; }では回り込みません、何方か知恵をお貸しいただけないでしょうか。

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： noname#163110
回答日時：2011/07/21 22:09

これを試してうまくいけばANo2さんのものを試したらいいとおもう

あと質問者の技術レベルがわからないのですが
<>とか"とか抜けてないですよね？

<html>
<head>
<style>
img,p{float:left;}
</style>
</head>
<body>
<div id="b">
<img src="画像１">
<p>テキスト</p>
<img src="画像２">
<p>テキスト</p>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

有り難うございます。
原因は不明ですが、img { float: left; }は適当出来ました。
ただ体裁が崩れるので、別の質問でします。

通報する

お礼日時：2011/07/22 09:18

No.3

回答者： ORUKA1951
回答日時：2011/07/21 18:58

　普通にfloatで回り込むはずです。

ただし、ブロックの配置などにfloatを使うなど変な事しているとだめですが・・・
　いずれにしてもHTMLが、きちんと文書構造にしたがってマークアップされていれば、2カラムだろうが2カラムだろうが、5カラムだろうが好きに・・。【下のほうにある/* を削除すると左右２カラムの4カラムになります。】
HTMLをデザインのためにマークアップしてると融通利きません。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
サンプルのHTMLは、文書構造だけをきちんと示しているはずです。よってシンプル
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み。
CSSの内容については、難しいところはないので、説明しません。
★タブは＿に置換してあります。元に戻してください。

<!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 name="author" content="ORUKA1951">
＿＿<meta http-equiv="Content-Style-Type" content="text/css">
＿＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿＿<link rel="START" href="../index.html">
＿＿<style type="text/css">

＿＿</style>
</head>
<body>
＿＿<div class="header">
＿＿＿＿<h1>サンプル</h1>
＿＿＿＿<p>画像を回り込ませる。</p>
＿＿</div>
＿＿<div class="section">
＿＿＿＿<h2>画像の周囲を回りこませる</h2>
＿＿＿＿<div class="section">
＿＿＿＿＿＿<div class="figure">
＿＿＿＿＿＿＿＿<img src="./images/sample1.jpg" width="240" height="169" alt="５カラムの中心ブロック内の画像を回り込む文章">
＿＿＿＿＿＿</div>
＿＿＿＿＿＿<p>
＿＿＿＿＿＿＿＿ホームページ製作中ですが、トップ、ボトムの間にｂ１、ｂ、ｂ２のブロックを組んでいます。
＿＿＿＿＿＿</p>
＿＿＿＿＿＿<p>
＿＿＿＿＿＿＿＿問題は真ん中のｂに写真を何枚か貼り付けて、テキストをその写真の横に、回りこませたいのですが、img { float: left; }では回り込みません、何方か知恵をお貸しいただけないでしょうか。
＿＿＿＿＿＿</p>
＿＿＿＿＿＿<div class="article">
＿＿＿＿＿＿＿＿<h2>説明</h2>
＿＿＿＿＿＿＿＿<p>
＿＿＿＿＿＿＿＿＿＿ごく普通にfloatでよいです。ただしimgは「置換インライン要素」ですから出来ればサンプルのようにブロックに入れるほうが良いでしょう。
＿＿＿＿＿＿＿＿</p>
＿＿＿＿＿＿</div>
＿＿＿＿</div>
＿＿＿＿<div class="annotation">
＿＿＿＿＿＿<div class="nav">
＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿<li><a href="../index.html">Top</a></li>
＿＿＿＿＿＿＿＿＿＿<li><a href="../books">書籍</a></li>
＿＿＿＿＿＿＿＿＿＿<li><a href="../info">情報</a></li>
＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿</div>
＿＿＿＿＿＿<div class="aside">
＿＿＿＿＿＿＿＿<h3>脚注</h3>
＿＿＿＿＿＿</div>
＿＿＿＿</div>
＿＿</div>
＿＿<div class="footer">
＿＿＿＿<h2>文書情報</h2>
＿＿</div>
</body>
</html>