0

現在、私は自分のウェブサイトを流動的にするように再設計しています。1% css グリッドを使用しています。ただし、複数の列で [続きを読む] リンクを水平方向に配置するのは困難です。問題は、ビューポートのサイズが変更されると、readmore リンクが、それが属する列の下ではなく、互いの下に表示されることです。これは、html 構造に固有のものです。これを達成するためにどのように再設計できますか？

主な問題は、製品の div 内に readmore リンクを配置した場合、高さを指定できないことです。これは、ブラウザー ウィンドウのサイズを変更すると高さが変わるためです (テキストの折り返しのため)。この場合、readmore リンクをどのように配置しますか。

スクリーンショット:

位置合わせされたリンク

望ましくない動作

HTML 構造 (1% グリッド 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>
4

1 に答える 1

0

「詳細」は製品 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>

于 2015-04-26T12:00:40.847 に答える