こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

レイアウトが崩れてしまう原因を教えて下さい。

添付データのようなデザインをtableを使わずに作りたいのですが、
テキスト数の増減やphotoのmarginをいじるとレイアウトが崩れてしまいます。
テキストが増えても減ってもレイアウトが崩れない方法はありますか?

<style type="text/css">
.contents{
width: 650px;
margin-right: auto;
margin-left: auto;
}

.contents ul{
list-style: none;
}

.contents ul li.photo{
float: left;
border: 1px solid #ccc;
padding: 5px;
}

.contents ul li.text, .contents ul li.title{
margin-left: 200px;
}

.contents ul li.title{
margin-top: 20px;
margin-bottom: 10px;
color: #111;
}

.contents ul li.text{
font-size: 14px;
}

.contents ul li.photo a img{
border-style: none;
outline: none;
}

.contents ul li.title a:hover{
color: #ccc;
}
</style>

<div class="contents">
<ul>
<li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li>
<li class="title"><a href=""><u>これはサンプルです</u></a></li>
<li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ul>
</div>

<div class="contents">
<ul>
<li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li>
<li class="title"><a href=""><u>これはサンプルです</u></a></li>
<li class="text">テキストテキストテキストテキストテキストテキスト</li>
</ul>
</div>

<div class="contents">
<ul>
<li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li>
<li class="title"><a href=""><u>これはサンプルです</u></a></li>
<li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ul>
</div>

大変申し訳ございませんが、この投稿に添付された画像や動画などは、「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWAVEよりご覧ください。

マルチメディア機能とは?

投稿日時 - 2011-02-08 01:44:55

QNo.6506294

すぐに回答ほしいです

質問者が選んだベストアンサー

スタイルシートをはずした場合・・検索エンジンやスタイルシートを解釈しない端末も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>

投稿日時 - 2011-02-10 12:16:52

お礼

ありがとうございました。

投稿日時 - 2011-02-24 11:47:47

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

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>

投稿日時 - 2011-02-10 00:32:56

お礼

ありがとうございました。

投稿日時 - 2011-02-24 11:48:04

ANo.1

floatを使っているのに、clearされていないのが原因だと思います。

contentsに、clearfixをいれると解決すると思います。

clearfixは、Googleで検索してください。

投稿日時 - 2011-02-08 14:16:40

お礼

ありがとうございました。

投稿日時 - 2011-02-24 11:48:18

あなたにオススメの質問