0

私はちょうどいくつかのデザインを提示するために小さなウェブページをデザインし始めました。
これは2列のページで、それぞれに画像とテキストが含まれています。

私が今抱えている問題は、1つの列にテキストを追加すると、他の列の画像が移動することです。

私のフィドルをチェックしてください：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 に答える