レイアウトが崩れてしまう原因を教えて下さい。
添付データのようなデザインを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>
お礼
ありがとうございました。