【 HP作成質問箱 】

新しい質問は「新規入力」ボタンをクリックしてください。
| Page-1

【HP作成質問箱/詳細】 一覧 / 詳細

  No.9870 2枚の画像を隙間なく並べたい。
[まこじ] [ブラウザ]  09/02/02 (月) 16:08
画像を2枚横に並べようとしたのですが、何故か上下になってしまいます。

width属性を指定しないと横に並びますが、2枚の間に隙間が出来てしまいます。

どうすれば2枚の間に隙間を作らずに横に並べられるでしょう。


**** test_01.html ****

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head xmlns=">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<link href="test_01.css" type="text/css" rel="stylesheet" />
</head>
<body xmlns=">
<div class="wrapper">
<img class="02" alt="無料査定スタート" src="01_02.jpg" />
<img class="03" alt="買取金額の目安表" src="01_03.jpg" /><br />
</div>
</body>
</html>


**** test_01.css ****

div.wrapper {
margin: 0px auto;
padding: 0px;
text-align: center;
  No.9871 Re:2枚の画像を隙間なく並べたい。
[atom] [ブラウザ]  09/02/02 (月) 16:31
これは単純にimgタグ間にある「改行」がスペース1個分に置き換わってるからです。
「改行」を削除して1行に記述すれば隙間はなくなると思います。

それとそれでも2行に跨るのなら、それはブラウザの持つ、「自動折り返し」機能です。
横幅を超えたものは自動的に次の行に表示されてしまいます。

これを解決するには、divタグの横幅を広く取るか、
divタグに「white-space: nowrap;」のスタイルを入れるか、
テーブルタグのセルで1個1個括ってやればいいです。
  No.9872 Re^2:2枚の画像を隙間なく並べたい。
[まこじ] [ブラウザ]  09/02/02 (月) 19:42
改行は縦にも横にもスペースを空けるのですね。

勉強になりました。

ありがとうございます。
| Page-1

 一覧 / 詳細


page update:23/11/28 16:31

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom