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

目前，我正在重新设计我的网站，使之流畅。我使用的是1%css网格。然而，我很难在几列中水平对齐阅读更多链接。问题是，如果视口调整大小，readmore链接将显示在彼此的下方，而不是它所属的列的下方。这是html结构固有的。我如何重新设计它来实现这一点

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

截图：

HTML结构只有一个%grid css适用，简单浮动

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

---

“了解更多”应该在“产品”部分，而不是您想要的那样

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

---

在这些div中，如何水平对齐各种“了解更多”链接？尤其是当这些元素的高度在调整大小时发生变化时