jquery - 4 个不同的并排 UL - 每行等 li 高度

Question

我有 4 个具有相同数量 li 项目的无序列表。它们在显示器中并排排列。有没有一种简单的方法可以告诉每个孩子 li 项目（ul-one li:nth-child(1)、ul-two li:nth-child(1) 等）具有相同的高度？原因是当我填写数据时，一个 UL 比其他 UL 高得多，它破坏了结构。

我可以想到几种方法来实现这一点：
jQuery (parent('ul') = nth-child index)
CSS w/ Classes per row
Convert to Table

这些都不是理想的:-( 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 个中最大的子元素？（不用说 (:first-child, :nth-child(2) 等）

score 1 · Accepted Answer

小的 jquery 脚本会做..

请参阅 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>

查询

$(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' );
});

score 0 · Accepted Answer

Since it's tabular data, use a table - the example you mentioned gets away with using lists because the rows are the same height.

If you want the pop up effect, place divs within each cell, apply classes to these divs according to column, then onmouseover, set a negative top to all divs with the same class.

A simple example (not very efficient, I know, feel free to improve) + 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);});});

jquery - 4 个不同的并排 UL - 每行等 li 高度

2 回答 2

CSS

HTML

查询

Related

Reference