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

Question

目前，我正在重新设计我的网站以使其流畅。我正在使用百分之一的 CSS 网格。但是，我很难水平对齐阅读多列中的更多链接。问题是，如果视口被调整大小，readmore 链接会出现在彼此下方，而不是在它所属的列下方。这是 html 结构所固有的。我该如何重新设计它来实现这一点？

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

截图：

Aligned links

Undesired behaviuor

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>

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>