Ата-аналар бөлігіндегі балалар divs белгісіз санының биіктігін тең бөлу

Келесі (2) div бар деп айтайын:

№1 мысал

<div style="height:100px;">
  <div>1</div>
  <div>2</div>
</div>

№ 2 мысал

<div style="height:400px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Биіктікті айқындамай-ақ, балалар divs үшін биіктікті автоматты түрде теңестіргім келеді.

Қалыпты жағдайда, бірінші мысал үшін ішкі дивиздердің әрқайсысы үшін 50px (немесе 50%) биіктігін айтуға болады. Ал # 2 үшін ішкі дивиялардың әрқайсысы үшін 100px (немесе 25%) биіктігін айтуға болады.

Мәселе мынада, менің ата-аналарымның шексіз саны және ата-аналар ішінде кейбір балалардың белгісіз саны болады (кейбіреулері бір баланы, ал қалғандары 5 және одан көп болуы мүмкін). Мәселен, балаларға қаншалықты бар болса да, бір-бірінің арасындағы биіктігі автоматты түрде бөлінетінін қалаймын.

Рахмет!

1

6 жауаптар

Ата-ананың биіктігін ғана алайық, балалар дивизиясының санына қарай бөліп, биіктігін орнатыңыз.

var $parent = $('div#parent'),
    $children = $parent.children(),
    child_height = $parent.height()/$children.size();

$children.height(child_height);
4
қосылды

Қарапайым шешім - display: table; пайдалану. Өкінішке орай, бұл Internet Explorer 6 және одан төмен қалдырады. Бірақ бұл jsfiddle дегенді оңай оқып көріңіз.

3
қосылды

http://jsfiddle.net/KQZZy/

$(".parent").each(function(){
    var $this = $(this);
    var $children = $this.children();

    $children.height($this.height()/$children.length - 2);
});

- 2 - divs-дағы шекараларды реттеу үшін және сіздің жағдайда қажет болмайтынын ескеріңіз.

2
қосылды
<div id="auto-height" style="height:400px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>


function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('#auto-height').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
        $(this).css('height', heights[0]);
    });        
}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);


Try with this...
0
қосылды
Менің ойымша, сіз бұл мәселені дұрыс түсінбеуіңіз мүмкін. Сондай-ақ, $ ('# auto-height') сияқты нәрселерді жасаңыз, олардың әрқайсысы ( ешқашан идентификаторы бірегей болуы керек).
қосылды автор James Montagne, көзі

Төменде коды барлық балаларға #yourdiv мөлшерін бірдей биіктікте өзгертеді:

$("#yourdiv").each(function() {
    var ydh = $(this).height(),
        num = $(this).children("div").size(),
        dh  = ydh/num,
        ah  = 0;
    $(this).children("div").each(function(i) {
        var h;
        if (i + 1 == num) {//last item
            h = ydh - ah;
        } else {
            h = Math.round((i + 1) * dh);
        }
        $(this).height(h);
    });
});
0
қосылды
$ («# yourdiv») әрқайсысы () шын мәнінде жарамды емес, өйткені id бірегей болуы керек.
қосылды автор James Montagne, көзі
Әрине. Мен толық шешім емес, мысал келтіруге тырыстым.
қосылды автор aorcsik, көзі

Әрбір ата-анадан өтіп, балалардың дивизиясының жалпы санын алыңыз және олардың ата-анасының биіктігін бөліңіз; Бұл сияқты:

<div class="parentDiv" style="height:500px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="parentDiv" style="height:200px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

$('.parentDiv').each(function(index, record){
   var t = $(this).children().length;
   var h = ($(this).height()/t);
   $('div', this).css('height', h+'px');
});

Бұл әрбір div арқылы өтеді және ата-аналардың биіктігіне қарай бала divs өлшемін жаңартады.

Here's a fiddle to display it in action: http://jsfiddle.net/krEYR/1/

Бұл көмектеседі деп үміттенемін!

0
қосылды
Мұнда табуға болады табу мүмкін кез келген кірістірілген divs. Оның орнына kids керек.
қосылды автор James Montagne, көзі
@JamesMontagne Жақсы нүкте; өңдейді.
қосылды автор dSquared, көзі