css - 在div中添加更多文本时如何将2张图片并排放置而不移动？

Question

我刚开始设计一个小网页来展示一些设计。
这是一个有 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%;  
}

Answer 1

你给你的专栏display:inline-block，删除它，float:left而不是

继承人的小提琴：http: //jsfiddle.net/tMY57/3/