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

Question

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

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

是否有可能得到H2的和对的永远是相同的高度？我在想的那种拙劣的方式是用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

您可以通过将具有可变内容的元素的高度设置为保持最大值的某个值来“修复”外观。下面的CSS会为您链接的页面执行此操作：

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

这只适用，因为您事先知道看起来最好的高度。

如果你有能力改变你的HTML，你可以采取新的方法并使用网格系统。下面是一个使用Twitter的引导（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>在自动处理溢出的方法。