0

私の高さulは500pxです。li存在する数に対して高さを動的にするにはどうすればよいliですか? たとえば、 5liがある場合、高さは 20% になり、 4liの場合は 25% に変わります。

これが私が試したものですが、「開発者モード」から1つの要素を削除すると、高さは変わりません。

ul{
    list-style:none;
    height:500px;
    width:100%;
    overflow:hidden;
}
li{
    width:100px;
    height:25%;
    background:red;
    border:1px solid black;
}

http://jsfiddle.net/crcb8/

ここに画像の説明を入力

4

4 に答える 4

2

小さな jquery で必要なものが得られ、ほとんどのブラウザーとモバイル デバイスでサポートされています。

$(document).ready(function () {
     var x = $('li').siblings().length;
     var y = 100/x;
     $('li').css('height', y + '%');
});
于 2013-07-31T21:42:14.203 に答える
0

ブレンダーが言ったように、これは css ではクロスブラウザー (?) ではありません。

最良の解決策は、たとえばこのデモのように、高さを計算できる小さな JavaScript コードです。

var boxes = document.querySelectorAll('#box li'), // Get the boxes
    size  = 100 / boxes.length; // Calculate the percentage 
for( var i = 0; i < boxes.length; i++ ) {
    boxes[i].style.height = size + '%'; // Set the height
}

デモ: http://jsfiddle.net/crcb8/6/

于 2013-07-31T21:47:44.790 に答える
0

CSSについてはわかりません。しかし、次の jQuery コードが役に立つかもしれません。

jsfiddle.net/crcb8/8/

注: これは私が作成した最初の jQuery コードです。また、必要な高さを得るには、ボーダーとパディングに注意する必要があります。

于 2013-07-31T21:59:25.420 に答える