Question

无论如何

是他们在这个页面

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

将阅读按钮保持在相同的高度，因为在莫的地方看起来有点混乱感谢任何帮助

Answer 1

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

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到底部。但我猜，修正高度不是你想要的。

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

2 个答案: