- ベストアンサー
レイアウトが崩れる原因とは？
- テキスト数の増減やphotoのmarginをいじるとレイアウトが崩れてしまう理由について教えてください。
- テキストが増えても減ってもレイアウトが崩れない方法はありますか？
- 添付データのようなデザインをtableを使わずに作りたいのですが、どのようにすればレイアウトを崩さずに実現できるでしょうか？
- tekkenman7
- お礼率70% (150/212)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
contentsっておかしい(^^)。contentsと書くときは目次とか内容ですね。contents (table)とか・・ 簡単なHTMLを・・ Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み <!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 http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <style type="text/css"> <!-- html,body,#product dl,#product dl dt,#product dl dd{padding:0px;margin:0px;} body{background-color:gray;width:100%;} #products{ width:80%;margin-left:auto;margin-right:auto; } #products dl,#products dl dt,#products dl dd {display:block;} #products dl {position:relative;min-height:190px;background-color:white;padding-top:10px; } #products dl dt,#products dl dd{margin-left:280px;} #products dl dd.photo{display:block;position:absolute;top:10px;margin-left:10px;} --> </style> <link rel="START" href="../index.html"> </head> <body> <h1><a name="top">サンプル</a></h1> <h2>商品説明</h2> <div id="products"> <dl> <dt>商品名1</dt> <dd class="photo"><img src="./img/sample1.jpg" width="240" height="169" alt=""></dd> <dd>商品説明・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> </dl> <dl> <dt>商品名2</dt> <dd class="photo"><img src="./img/sample2.jpg" width="240" height="169" alt=""></dd> <dd>商品説明・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> </dl> <dl> <dt>商品名3</dt> <dd class="photo"><img src="./img/sample3.jpg" width="240" height="169" alt=""></dd> <dd>商品説明・・・・・・・・・・・・・・・・・</dd> <dd>・・・・・・・・・・・・・・・・・・・・・</dd> </dl> </div> </body> </html>
お礼
ありがとうございました。
- outbrave
- ベストアンサー率60% (231/380)
floatを使っているのに、clearされていないのが原因だと思います。 contentsに、clearfixをいれると解決すると思います。 clearfixは、Googleで検索してください。
お礼
ありがとうございました。
関連するQ&A
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
- EP709A 廃インク吸収パッドの交換について解説します。
- 自分で交換できるのか、専門のサービスに頼むべきなのかについて考えてみましょう。
- 廃インク吸収パッドの吸収量が限界に達し、交換の必要性が出てきた場合の対処方法についても紹介します。
お礼
ありがとうございました。