-1

同じ量のliアイテムを持つ4つの順序付けられていないリストがあります。それらはディスプレイに並んでいます。すべての子アイテム (ul-one li:nth-child(1)、ul-two li:nth-child(1) など) に同じ高さを持たせる簡単な方法はありますか? その理由は、データを入力すると、1 つの UL が残りの UL よりもはるかに高くなり、構造が壊れてしまうからです。

これを達成するためのいくつかの方法を考えることができます:
jQuery (parent('ul') = nth-child index)
CSS w/ Classes per row
Convert to Table

これらのどれも理想的ではありません:-( 4つのリスト項目すべてに対して特定のクラスなしでこれを自動構成するためのCSSの疑似要素はありますか?例を示しましょう...

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 を解読する時間を節約できます。

だから、基本的な質問：

4つの中で最大の子に自動サイズ変更するように、すべての同等の子要素に指示するCSSの方法はありますか? (言わずに (:first-child, :nth-child(2) など)

4

2 に答える 2

1

小さな jquery スクリプトで十分です。

jsfiddle の DEMO を参照してください... 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>

Jクエリ

$(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' );
});
于 2013-05-29T07:46:10.473 に答える