html - 流体设计对齐阅读更多链接

Question

目前，我正在重新设计我的网站，使其更加流畅。我正在使用 one% css 网格。但是，我很难在几列中水平对齐阅读更多链接。问题是，如果调整视口(viewport)大小，readmore 链接会出现在彼此下方，而不是出现在它所属的列下方。这是 html 结构所固有的。我如何重新设计它才能实现这一目标？

主要问题是，如果将阅读更多链接放在产品 div 中，则无法指定高度，因为调整浏览器窗口的大小会改变高度(由于文本换行)。在这种情况下，您如何对齐阅读更多链接。

截图:

Aligned links

Undesired behaviuor

HTML 结构(只有百分之一的网格 css 适用，简单的 float )

    <div class="onerow">
        <div class="col4 product">

        <p><img src="http://arevico.com/wp-content/uploads/2013/07/product-foto.png"></p>
            <h2>Facebook Lightbox</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

        </div>
        <div class="col4 product ">
        <p><img src="http://arevico.com/wp-content/uploads/2013/07/easy-fluid-accordion.png"></p>

            <h2>Custom Plugin Design</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

        </div>
        <div class="col4 product last">
            <p><img src="http://arevico.com/wp-content/uploads/2014/06/Hopetoun_falls1-297x198.jpg"></p>

            <h2>WP Tactical Popup</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        </div>

        <div class="onerow">
            <!-- Readmore links -->
            <div class="col4"><p><a href="">Learn more</a></p></div>
            <div class="col4"><p><a href="">Learn more</a></p></div>
            <div class="col4 last"><p><a href="">Learn more</a></p></div>
        </div>

Answer 1

“了解更多”应该在产品 div 中。它应该按您的意愿工作。

<div class="onerow">
<div class="col4 product">

    <p>
        <img src="http://arevico.com/wp-content/uploads/2013/07/product-foto.png">
    </p>
    <h2>Facebook Lightbox</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

    <p>
        <a href="">Learn more</a>
    </p>
</div>
<div class="col4 product ">
    <p>
        <img src="http://arevico.com/wp-content/uploads/2013/07/easy-fluid-accordion.png">
    </p>

    <h2>Custom Plugin Design</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

    <p>
        <a href="">Learn more</a>
    </p>
</div>
<div class="col4 product last">
    <p>
        <img src="http://arevico.com/wp-content/uploads/2014/06/Hopetoun_falls1-297x198.jpg">
    </p>

    <h2>WP Tactical Popup</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </p>
    <p>
        <a href="">Learn more</a>
    </p>
</div>