html - 各ボックスのCSSが異なるボタンは同じ配置を維持します

Question

とにかく、このページはこちらです

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

読書ボタンをまったく同じ高さに保つには、助けてくれてありがとう

Answer 1

ギザギザのコンテンツを排除するには、情報のレイアウトを再考する必要があります。これが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を下部に設定することです。しかし、私は、高さを固定することはあなたが望むものではないと思います。