0

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

1 回答 1

1

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

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

于 2013-03-21T23:44:29.130 回答