4個不同的並排UL - 每行相等的高度

Question

我有4個相同數量的li項目的無序列表。 他們並排顯示。 有沒有一種簡單的方法來告訴每個孩子li項目（ul-one li：nth-​​child（1），ul-two li：nth-​​child（1）等）具有相同的高度？理由是當我填寫數據時，其中一個UL比其他的​​更高，並且破壞了結構。

我能想到的幾種方法來實現：
的jQuery（父（「UL」）=第n個孩子指數）
CSS瓦特/每 行
類轉換表的這些

無是理想的:-(是否有在CSS任何僞元素來自動配置這個不爲所有4個列表項具體的類？讓我展示一個例子...

http://www.sinsysonline.com/repair/price.html

（選擇拿起查看格價）

這裏是我的HTML標記：

<div id="price_charts"> 
<div id="pri_drop-off" class="grid_12"> 

    <ul class="pricing_table"> 
     <li class="price_block"> 
     <a href="dropoff.html"><h2>&nbsp;</h2></a> 
      <div class="price"> 
       <div class="price_figure price_con"> 
        <span class="price_number">&nbsp;</span> 
        <span class="price_tenure">&nbsp;</span> 
       </div> 
      </div> 
      <ul class="features serv"> 
       <li class="category"><a href="services_hwrep.html">Hardware Repair</a></li> 
       <li class="category"><a href="services_netts.html">Network Troubleshooting</a></li> 
       <li class="category"><a href="services_printsetup.html">Printer Setup</a></li> 
       <li class="category"><a href="services_osinstall.html">Operating System Install</a></li> 
       <li class="category"><a href="services_email.html">E-Mail Setup</a></li> 
       <li class="category"><a href="services_compsetup.html">Computer Setup</a></li> 
       <li class="category"><a href="services_swinstall.html">Software Install</a></li> 
       <li class="category"><a href="services_tune.html">Computer Tune Up</a></li> 
       <li class="category"><a href="services_hwup.html">Hardware Upgrade</a></li> 
       <li class="category"><a href="services_backup.html">Data Backup &amp; Recovery</a></li> 
       <li class="category"><a href="services_wifi.html">Wireless Troubleshooting</a></li> 
      </ul> 
     </li> 
     <li class="price_block"> 
      <a href="pickup.html"><h3>Desktop</h3></a> 
      <div class="price"> 
       <div class="price_figure"> 
        <span class="price_number">$30</span> 
        <span class="price_tenure">per hour</span> 
       </div> 
      </div> 
      <ul class="features"> 
       <li><a href="services_hwrep.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_netts.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_printsetup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_osinstall.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_email.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_compsetup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_swinstall.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_tune.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_hwup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_backup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_wifi.html"><img src="../css/images/check.png" /></a></li> 
      </ul> 
      <div class="footer"> 
       <a href="contact.html" class="action_button">Contact Us</a> 
      </div> 
     </li> 
     <li class="price_block"> 
      <a href="onsite.html"><h3>Laptop</h3></a> 
      <div class="price"> 
       <div class="price_figure"> 
        <span class="price_number">$50</span> 
        <span class="price_tenure">per hour</span> 
       </div> 
      </div> 
      <ul class="features"> 
       <li><a href="services_hwrep.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_netts.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_printsetup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_osinstall.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_email.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_compsetup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_swinstall.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_tune.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_hwup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_backup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_wifi.html"><img src="../css/images/check.png" /></a></li> 
      </ul> 
      <div class="footer"> 
       <a href="contact.html" class="action_button">Contact Us</a> 
      </div> 
     </li> 
     <li class="price_block"> 
      <a href="remote.html"><h3>Server</h3></a> 
      <div class="price"> 
       <div class="price_figure"> 
        <span class="price_number">$30</span> 
        <span class="price_tenure">per hour</span> 
       </div> 
      </div> 
      <ul class="features"> 
       <li><a href="services_hwrep.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_netts.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_printsetup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_osinstall.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_email.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_compsetup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_swinstall.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_tune.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_hwup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_backup.html"><img src="../css/images/check.png" /></a></li> 
       <li><a href="services_wifi.html"><img src="../css/images/check.png" /></a></li> 
      </ul> 
      <div class="footer"> 
       <a href="contact.html" class="action_button">Contact Us</a> 
      </div> 
      </li> 
     </ul> 
</div> 
</div> 

和電流JS懸停效果：

$('ul.features li').on('mouseenter mouseleave', function() { 

    $('ul.features > li:nth-child(' + ($(this).index() + 1) + ')').toggleClass('pri_active'); 
    $('ul.features > li.category:nth-child(' + ($(this).index() + 1) + ')').toggleClass('pri_cat'); 
}); 

和一大堆CSS的我將節省你解密的時間。

因此，基本的問題：

是否有一個CSS的方式告訴每一個相當於子元素自動調整到最大的孩子4中？ （不說（第一個孩子，第n個孩子（2）等）

Answer 1

小jQuery的腳本會做..

見DEMO上的jsfiddle ...http://jsfiddle.net/VcEPT/

CSS

body { 
    margin:0; 
    padding:0; 
    width:100%; 
    font-size:11px; 
} 
ul{ 
    float:left; 
    width:95%; 
    display:inline; 
    list-style:none; 
} 
ul li{ 
    float:left; 
    width:20%; 
    margin:1%; 
    background:#dfdfdf; 
} 

HTML

<ul> 
    <li class="price_block"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    </li> 
    <li class="price_block"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    </li> 
    <li class="price_block"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
    </li> 
    <li class="price_block"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </li> 
</ul> 

JQUERY

$(document).ready(function() { 
    var max_height = 0; 
    $('li.price_block:lt(4)').each(function() { 
     if($(this).height() > max_height) 
     max_height = $(this).height();     
    }); 
    // try to comment On and Off this line 
    $('li.price_block').css("height", max_height+'px'); 
}); 

Answer 2

由於它是表格數據，所以使用表格 - 您提到的例子因使用列表而丟失，因爲行高度相同。

如果你想在彈出的效果，每個細胞內發生的div，根據列應用類這些div，那麼的onmouseover，設置一個負的頂部，所有的div同一類。

一個簡單的例子（不非常高效，我知道，可以自由改善）+ fiddle：

html：

<table> 
     <tr> 
      <td> 
       <div class='column first'></div> 
      </td> 
      <td> 
       <div class='column second'></div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class='column first'></div> 
      </td> 
      <td> 
       <div class='column second'></div> 
      </td> 
     </tr> 
</table> 

CSS：

.column{ 
    position:relative; 
    width:100px; 
    height:100px; 
} 
.column.first{ 
    background:red; 
} 
.column.second{ 
    background:blue; 
} 

的Javascript：

$('.column.first').mouseover(function(){$('.column.first').each(function(){$(this).css('top', -10);});}); 
$('.column.first').mouseout(function(){$('.column.first').each(function(){$(this).css('top', 0);});}); 
$('.column.second').mouseover(function(){$('.column.second').each(function(){$(this).css('top', -10);});}); 
$('.column.second').mouseout(function(){$('.column.second').each(function(){$(this).css('top', 0);});});