我刚开始设计一个小网页来展示一些设计 它是一个包含2列的页面，每个页面都有一张图片和一些文字。
我现在遇到的问题：当我向一列添加更多文本时，另一列的图片会移动。
查看我的小提琴： http://jsfiddle.net/JannikS/tMY57
我的HTML标记：
<div id="designrow">
<div class="design">
<img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" />
<h3>Title </h3>
<p>Short description of our design..</p>
</div>
<div class="design">
<img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" />
<h3>Title </h3>
<p>Short description of our design..<br /> but with some more text!</p>
</div>
</div>
和CSS：
.designrow {
float: left; }
.design {
width: 300px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
display: inline-block;
}
.design img{
width: 100%;
height: 100%;
}