Question

我正在制作一个包含大量项目的页面，其中包含不同的标题和文字。我希望标题和文字都排在同一高度。一些标题将是2行，有些只有1.它也需要响应，所以我不能只设置一个最小高度。

screenshot http://iforce.co.nz/i/cw1tl2gq.vhr.jpg

是否有可能让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生成的！所以它没有太大的灵活性。 This is the page如果你想看到它。

Answer 1

你可以＆＃34;修复＆＃34;通过将具有可变内容的元素的高度设置为具有最大值的某个值来进行外观。以下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>，溢出将自动处理。

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

1 个答案: