1

我正在制作一个页面，上面有一堆不同标题和文本的项目。我希望标题和文本都排在同一高度。有些标题是 2 行，有些只有 1 行。它还需要响应，所以我不能只设置最小高度。

截屏
（来源：iforce.co.nz）

是否可以让 h2 和 p 始终保持相同的高度？我想的 hacky 方式是用 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 的方法（演示）

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