Spalten Kind gleich pro Zeile

Question

Ich habe eine Produktgalerie, die in der Höhe für die Eltern und das Kind div übereinstimmen muss.

Ich muss es pro Zeile berechnen. Aber ich bekomme das größte Kind und es wurde auf alle div angewandt. Was ich will, ist das höchste Div und wendet es für jede Zeile an.

$(document).ready(function() { 
var item_title_height = 0; 
var item_details_height = 0; 

$('.item-title').each(function(i, obj) { 
    if($(this).height() > item_title_height) { 
    item_title_height = $(this).height(); 
    } 
}); 

$('.item-details').each(function(i, obj) { 
    if($(this).height() > item_details_height) { 
    item_details_height = $(this).height(); 
    } 
}); 

$(".item-title").height(item_title_height); 
$(".item-details").height(item_details_height); 

}); 

Das ist meine Geige

fiddle

Hoffe, dass Sie mich

Answer 1

Nicht sicher helfen können, wie Sie in jQuery tun dies würde. aber Sie könnten leicht das größte div mit Vanille finden. Verwenden Sie window.getComputedStyle, um Styling-Informationen für Elemente zu erhalten, die möglicherweise keine expliziten CSS- oder HTML-Stildeklarationen haben.

var heights = Array.prototype.slice.call(document.getElementsByClassName('item-title')).map(function(i){ 
    var cs = window.getComputedStyle(i,null) 
    return parseFloat(cs.getPropertyValue("height")) 
}); 
alert(Math.max.apply(null,heights)) 

Answer 2

Also hier ist, was ich folgern: Sie in jeder Zeile aussehen wollen, die höchste div in dieser Reihe finden, und stellen Sie alle divs in dieser Reihe zu dieser Höhe. Das heißt, nicht alle Zeilen haben die gleiche Höhe, aber alle Spalten innerhalb einer Zeile haben die gleiche Höhe.

Um dies zu tun, müssen Sie eine Möglichkeit haben, diese nach Zeilen zu gruppieren. Ich habe Ihren HTML-Code so geändert, dass alle 3 Child-Divs in einem "Zeilen" -Div eingeschlossen sind.

die aktualisierte Geige Siehe: http://jsfiddle.net/Qr48S/54/ (edit - feste Querung)

$(document).ready(function() { 


    $('.row').each(function(){ 
    var item_title_height = 0; 
    var item_details_height = 0; 
    $(this).find('.item-title').each(function(i, obj) { 
     if($(this).height() > item_title_height) { 
      item_title_height = $(this).height(); 
     } 
    }); 

    $(this).find('.item-details').each(function(i, obj) { 
     if($(this).height() > item_details_height) { 
      item_details_height = $(this).height(); 
     } 
    }); 

    $(this).find('.item-title').height(item_title_height); 
    $(this).find('.item-details').height(item_details_height); 
    }); 
}); 

Sie Schleife müssen jede über Zeile und dann Schleife über jedes div innerhalb dieser Reihe und gelten für alle divs innerhalb dieser Zeile die Änderung. Ich hoffe, das hilft!

Answer 3

Vielleicht könnten Sie für diese auf CSS und Javascript Relais

// JS maybe not necessary

.row { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.item-container { 
 
    width:350px; 
 
    flex:1 1 auto; 
 
    margin: 5px; 
 
    border: solid; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: gray; 
 
    padding:0!important;/* overides bootstrap */ 
 
} 
 
.item-details { 
 
    flex: 1; 
 
    background: white; 
 
} 
 

 
.item-button { 
 
    margin: 5px; 
 
    text-align: right; 
 
} 
 
/* image width a bit responsive ? */ 
 

 
img { 
 
    width:100%; 
 
    max-width:500px; 
 
    margin:auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title title title title title title title title title title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     <p>details 4</p> 
 

 
     </div> 
 
     <div class="item-button"> <button type="button" class="btn btn-primary">Add to cart</button> </div> 
 
    </div> 
 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title title title title title title title title title title title title title title title title title title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     </div> 
 
     <div class="item-button"> 
 
     <buttn type="button" class="btn btn-primary">Add to cart</button> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     </div> 
 
     <div class="item-button"> <button type="button" class="btn btn-primary">Add to cart</button> </div> 
 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title title title title title title title title title title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     <p>details 4</p> 
 
     <p>details 5</p> 
 
     <p>details 6</p> 
 
     </div> 
 
     <div class="item-button"> <button type="button" class="btn btn-primary">Add to cart</button> </div> 
 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title title title title title title title title title title title title title title title title title title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     <p>details 4</p> 
 
     </div> 
 
     <div class="item-button"> 
 
     <buttn type="button" class="btn btn-primary">Add to cart</button> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     </div> 
 
     <div class="item-button"> <button type="button" class="btn btn-primary">Add to cart</button> </div> 
 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title title title title title title title title title title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     <p>details 4</p> 
 

 
     </div> 
 
     <div class="item-button"> <button type="button" class="btn btn-primary">Add to cart</button> </div> 
 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title title title title title title title title title title title title title title title title title title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     <p>details 4</p> 
 
     <p>details 5</p> 
 
     </div> 
 
     <div class="item-button"> 
 
     <buttn type="button" class="btn btn-primary">Add to cart</button> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     </div> 
 
     <div class="item-button"> <button type="button" class="btn btn-primary">Add to cart</button> </div> 
 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title title title title title title title title title title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     <p>details 4</p> 
 

 
     </div> 
 
     <div class="item-button"> <button type="button" class="btn btn-primary">Add to cart</button> </div> 
 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title title title title title title title title title title title title title title title title title title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     </div> 
 
     <div class="item-button"> 
 
     <buttn type="button" class="btn btn-primary">Add to cart</button> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     </div> 
 
     <div class="item-button"> <button type="button" class="btn btn-primary">Add to cart</button> </div> 
 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title title title title title title title title title title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     <p>details 4</p> 
 

 
     </div> 
 
     <div class="item-button"> <button type="button" class="btn btn-primary">Add to cart</button> </div> 
 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title title title title title title title title title title title title title title title title title title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     <p>details 4</p> 
 
     </div> 
 
     <div class="item-button"> 
 
     <buttn type="button" class="btn btn-primary">Add to cart</button> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="item-container col-lg-4 col-md-4 col-sm-4"> 
 
     <div class="image"><img class="img-responsive" src="http://placehold.it/350x150"></div> 
 
     <div class="item-title"> title title title title </div> 
 
     <div class="item-details"> 
 
     <p>details 1</p> 
 
     <p>details 2</p> 
 
     <p>details 3</p> 
 
     <p>details 4</p> 
 

 
     </div> 
 
     <div class="item-button"> <button type="button" class="btn btn-primary">Add to cart</button> </div> 
 
    </div> 
 

 
    </div> 
 

 
</div>

demo