- ベストアンサー
レイアウトが崩れる原因とは？
- テキスト数の増減やphotoのmarginをいじるとレイアウトが崩れてしまう理由について教えてください。
- テキストが増えても減ってもレイアウトが崩れない方法はありますか？
- 添付データのようなデザインをtableを使わずに作りたいのですが、どのようにすればレイアウトを崩さずに実現できるでしょうか？
- tekkenman7
- お礼率70% (150/212)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートをはずした場合・・検索エンジンやスタイルシートを解釈しない端末もOK,タイトルは<tt>でマークアップ IEのバグ対策をしたもの <!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%;} body>h1,body>h2{text-align:center;} #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:170px;background-color:white;padding:10px;} #products dl dt{font-weight:bold;text-align:center;} #products dl dt,#products dl dd{margin-left:280px;text-indent:1em;} #products dl dd.photo{position:absolute;top:10px;left:10px;margin-left:10px;text-indent:0em;} --> </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> </dl> <dl> <dt>商品名2</dt> <dd class="photo"><img src="./img/sample2.jpg" width="240" height="169" alt=""></dd> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> <dd>テキストテキスト</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> </dl> </div> </body> </html>
その他の回答 (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で検索してください。
お礼
ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ありがとうございました。