Question

目前，我正在重新设计我的网站以便流畅。我正在使用一个％css网格。但是，我很难在多个列中水平对齐读取更多链接。问题是，如果视口调整大小，则readmore链接会显示在彼此之下，而不是它所属的列下方。这是html结构所固有的。我怎样才能重新设计它来实现这个目标？

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

截图：

Aligned links

Undesired behaviuor

HTML结构（只有一个％网格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>

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

1 个答案: