html - 按钮不同，每个框 css 保持相同的对齐方式

Question

他们无论如何都在这个页面上

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

将阅读按钮保持在同一高度，因为它看起来有点乱七八糟的地方谢谢你的帮助

Answer 1

您需要重新考虑信息的布局以消除锯齿状内容，这是一种解决方案：

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; }

Answer 2

我现在想到的唯一解决方案是将div设置为固定height并将position按钮absolute设置为底部。但我想，固定高度不是你想要的。