按钮不同每箱CSS保持相同的对齐

Question

是他们无论如何这个页面在这里

http://www.cmsni.net/portfollio/#!prettyPhoto

在同一HIGHT保持阅读按钮都因为它看起来有点乱的所有的地方莫感谢您的帮助

Answer 1

在我脑海中马上现在唯一的解决办法的div被设置为一个固定的height和position按钮absolute底部。但我想，固定高度不是你想要的。

Answer 2

你需要重新思考信息的布局，以消除锯齿的内容，这里是一个解决方案：

http://jsfiddle.net/65UpU/

HTML

<div class="tbl"> 

    <div class="row"> 
     <div class="col"> 
      <img src="http://th02.deviantart.net/fs51/200H/f/2009/264/c/8/Cutie_Kitten_by_Littlemeteor.jpg" /> 
     </div> 
     <div class="col"> 
      <img src="http://th02.deviantart.net/fs51/200H/f/2009/264/c/8/Cutie_Kitten_by_Littlemeteor.jpg" />    
     </div> 
     <div class="col"> 
      <img src="http://th02.deviantart.net/fs51/200H/f/2009/264/c/8/Cutie_Kitten_by_Littlemeteor.jpg" />    
     </div> 
     <div class="col"> 
      <img src="http://th02.deviantart.net/fs51/200H/f/2009/264/c/8/Cutie_Kitten_by_Littlemeteor.jpg" />   
     </div> 
    </div> 


    <div class="row"> 
     <div class="col"> 
      <h2>This is a header</h2> 
     </div> 
     <div class="col"> 
      <h2>This is a jagged header</h2> 
     </div> 
     <div class="col"> 
      <h2>This is even more of a jagged header</h2> 
     </div> 
     <div class="col"> 
      <h2>Wow, I can't beleive how this is even more of a jagged header</h2> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col"> 
      Lorem ipsum dolor sit amet, dictum libero aliquet non ac cras taciti, pede non lorem, ut nulla mauris tincidunt felis, id eleifend, netus ligula lobortis vestibulum interdum ipsam id 
     </div> 
     <div class="col"> 
      Lorem ipsum dolor sit amet, dictum libero aliquet non ac cras taciti, pede non lorem, ut nulla mauris tincidunt felis, id eleifend, netus ligula lobortis vestibulum interdum ipsam id. Ad gravida et hac sociosqu, libero in lacus in laoreet ac enim. Quam enim, venenatis pellentesque integer consequat mauris leo nibh, et nec ac libero odio lorem tristique. Ipsum pharetra nec nunc 
     </div> 
     <div class="col"> 
      Lorem ipsum dolor sit amet, dictum libero aliquet non ac cras taciti, pede non lorem, ut nulla mauris tincidunt felis, id eleifend, netus ligula lobortis vestibulum interdum ipsam id. Ad gravida et hac sociosqu, libero in lacus in laoreet ac enim. Quam enim, venenatis pellentesque integer consequat mauris leo nibh, et nec ac libero odio lorem tristique. Ipsum pharetra nec nunc ullamco, massa auctor adipiscing elit, etiam interdum nisl. Maecenas congue mauris dolor condimentum. 
     </div> 
     <div class="col"> 
Lorem ipsum dolor sit amet, dictum libero aliquet non ac cras taciti, pede non lorem, ut nulla mauris tincidunt felis, id eleifend, netus ligula lobortis vestibulum interdum ipsam id. Ad gravida et hac sociosqu, libero in lacus in laoreet ac enim. Quam enim, venenatis pellentesque integer consequat mauris leo nibh, et nec ac libero odio lorem tristique. Ipsum pharetra nec nunc ullamco, massa auctor adipiscing elit, etiam interdum nisl. Maecenas congue mauris dolor condimentum. 
Proin convallis placerat est sed nullam consectetuer, eget ullamcorper arcu quam dignissim suscipit nunc. Nulla arcu ipsum tempor sit ut egestas, vitae fermentum praesent, nunc eu quam, eget porta dui et nunc. Cursus congue quam commodo, donec elit varius nullam amet nunc    
     </div> 
    </div>  

    <div class="row_read_more"> 
     <div class="col"> 
      READ MORE 
     </div> 
     <div class="col"> 
      READ MORE 
     </div> 
     <div class="col"> 
      READ MORE 
     </div> 
     <div class="col"> 
      READ MORE 
     </div> 
    </div>  


</div> 

CSS

.tbl { width:1000px; } 
.row { overflow:hidden;} 
.row_read_more{ margin:20px 0 0 0; } 
.col { width:230px; margin:0 20px 0 0; float:left; } 
.col:last-child { margin:0; }