<div>1</div> <div>2</div> </div> Прыклад # 2 <div style="height:400px;"> <div>1</div> "> <div>1</div> <div>2</div> </div> Прыклад # 2 <div style="height:400px;"> <div>1</div> "> <div>1</div> <div>2</div> </div> Прыклад # 2 <div style="height:400px;"> <div>1</div> " />

У роўнай ступені размеркаваць вышыню невядомага колькасці дзяцей дзіў ўнутры бацькоўскага DIV

Скажам, у мяне ёсць наступныя (2) дзівы:

Прыклад # 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>

Я хацеў бы аўтаматычна і раўнамерна размяркоўваю па вышыні для дзяцей дзіў без канкрэтна паказаўшы вышыню.

У нармальных умовах, для першага прыкладу, я мог бы сцвярджаць вышыню 50px (ці 50%) для кожнага з унутраных дзіваў. І для # 2, я мог бы сцвярджаць вышыню 100px (або 25%) для кожнага з унутраных дзіваў.

Праблема заключаецца ў тым, што я буду мець неабмежаваны лік бацькоўскіх вышынь Дивых і невядомае колькасць дзяцей дзіваў за бацьках (некаторыя з іх могуць мець адно дзіця, у той час як іншыя могуць мець 5 або больш). Такім чынам, мне патрэбен спосаб, каб мець дзяцей DIVS аўтаматычна размяркоўваць вышыню паміж адзін з адным незалежна ад таго, колькі існуе.

Дзякуй!

1

6 адказы

Проста атрымаць вышыню аднаго з бацькоў, падзяліць на лік даччыных Div і ўсталяваць іх вышыню.

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

$children.height(child_height);
4
дададзена

Простае рашэнне складаецца ў выкарыстанні Дысплей: табліца . На жаль, выходзіць з 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 , каб наладзіць для межаў у мяне ёсць на дзівы і ў вашым выпадку могуць быць непатрэбнымі.

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
дададзена
Я думаю, што вы, магчыма, не зразумелі пытанне. Акрамя таго, рабіць нешта накшталт $ ( «# аўто-вышыня"). Кожны ( ніколі не мае сэнсу, так як ідэнтыфікатары павінны быць унікальнымі.
дададзена аўтар James Montagne, крыніца

Ніжэй код будзе змяняць памер усіх дзяцей DIV з #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, атрымаць агульная колькасць дзяцей-дзівы і падзяліць вышыню бацькоў на іх; як гэта:

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

Гэта будзе прайсці праз кожны з дзівы і абнаўленне памеру дзіцяці дзіў, заснаваны на вышыню бацькоў.

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

Я спадзяюся, што гэта дапамагае!

0
дададзена
Выкарыстанне знаходкі тут таксама будзе даваць якія-небудзь укладзеныя дзіў, якія могуць існаваць. <Код> дзеці павінны сапраўды быць выкарыстаны замест.
дададзена аўтар James Montagne, крыніца
@JamesMontagne Добры пытанне; будзе рэдагаваць.
дададзена аўтар dSquared, крыніца