1

見出しとテキストが異なる多数のアイテムを含むページを作成しています。見出しとテキストをすべて同じ高さに並べたい。2 行の見出しもあれば、1 行のみの見出しもあります。レスポンシブである必要もあるため、最小の高さだけを設定することはできません。

スクリーンショット
(出典: iforce.co.nz )

h2 と p を常に同じ高さにすることは可能ですか? 私が考えていたハックな方法は、JavaScript で短いものを埋めることでしたが、それは最後の手段です。

HTML は次のとおりです。

<div class="itemContainer" style="width:25.0%;">
<div class="catItemView groupPrimary">
    <div class="catItemHeader">
        <h3 class="catItemTitle">
            <a href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension">Wairamarama-Onewhero Seal Extension</a>
        </h3>
    </div>
    <div class="catItemBody">
        <div class="catItemImageBlock">
            <span class="catItemImage">
                <a href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension" title="Wairamarama-Onewhero Seal Extension">
                    <img src="/media/k2/items/cache/64d93d666355a43c4a86679a030d35b6_M.jpg" alt="Wairamarama-Onewhero Seal Extension" style="width:359px; height:auto;" />
                </a>
            </span>
            <div class="clr"></div>
        </div>
        <div class="catItemIntroText">
            <p>Evergreen Landcare have been involved in the Wairamarama-Onewhero Seal Extension as a sub-contractor for Heb Construction.</p>
        </div>
        <div class="clr"></div>
    </div>
    <div class="clr"></div>
    <div class="catItemReadMore">
        <a class="k2ReadMore" href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension">Read more...</a>
    </div>
    <div class="clr"></div>
</div>

これは K2/Joomla によって生成されます! そのため、柔軟性はあまりありません。 見たい方はこちらのページです。

4

1 に答える 1

1

可変コンテンツを持つ要素の高さを最大値を保持する値に設定することで、外観を「修正」できます。次の CSS は、リンク先のページに対してこれを行います。

div.catItemIntroText {
  height: 180px;
}
div.catItemHeader h3.catItemTitle {
  height: 45px;
}

これは、最適に見える高さが事前にわかっている場合にのみ機能します。

HTML を変更する立場にある場合は、新しいアプローチを取り、グリッド システムを使用できます。これは、Twitter Bootstrap ( demo )を使用するアプローチです。

<div class="container">
    <div class="row">
        <div class="span3">
             <h2>Wairamarama-Onewhero Seal Extension</h2>

        </div>
        <div class="span3">
             <h2>Te Rapa Pass</h2>

        </div>
        <div class="span3">
             <h2>Stockton Mine</h2>

        </div>
        <div class="span3">
             <h2>State Highway 88 Dunedin Realignment</h2>

        </div>
    </div>
    <div class="row">
        <div class="span3">
            <img src="http://placekitten.com/200/300" />
        </div>
        <div class="span3">
            <img src="http://placekitten.com/200/300" />
        </div>
        <div class="span3">
            <img src="http://placekitten.com/200/300" />
        </div>
        <div class="span3 ReadMore">
            <img src="http://placekitten.com/200/300" />
        </div>
    </div>
    <div class="row">
        <div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>

        </div>
        <div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>

        </div>
        <div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>

        </div>
        <div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>

        </div>
    </div>
</div>

各行 (テキスト、画像、ボタン) を独自に配置することで<div.row>、スピルオーバーは自動的に処理されます。

于 2013-04-08T22:53:14.920 に答える