javascript - 让多个文本段落占用相同的空间？

Question

我正在制作一个页面，上面有一堆带有不同标题和文本的元素。我希望标题和文本都在同一高度排列。有些标题是 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 生成的!所以它没有太多的灵 active 。 This is the page如果你想看的话。

Answer 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>溢出是自动处理的。