在骨干JS动态列的高度相等 [英] Equal height of dynamic column in backbone js

问题描述

我试图展现在我的主页的div项目​​列表。

I am trying to show item list in a div of my home page.

的Home.html

<div>
    <div id="header">
      <div class="header-left">
          Item
      </div>
      <div class="header-center">Load More</div>
      <div class="header-right"></div>
      <div class="header-line"></div>
    </div>
    <div id="containeritem">
      <!-- Here I want to write item list -->
    </div>
</div>

CSS

.containeritem{
  float: left;
  height: 100%;
  position: relative;
  width: 800px;
}

.itemTemplate {
   border: 1px solid #dddddd;
   float: left;
   margin-bottom: 8px;
   margin-left: 8px;
   width: 190px;
}

主页查看

render : function(){
  var itemCollection = new ItemCollection(itemlistdata);
  var itemListView = new ItemListView({collection : itemCollection, el : '#containeritem'});
  itemListView.render();
}   

ITEMLIST查看

var ItemListView = Backbone.View.extend({
    initialize: function(){
    },
    render: function(){
        this.collection.each(function(_itemData){
            var itemView = new ItemView({model : _itemData});
            this.$el.append(itemView.el);
        },this);
    }
});
return ItemListView;

查看项目

var ItemView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    className : 'itemTemplate',
    render: function(){
        var _item = _.template(ItemTem);
        this.$el.html(_item(this.model.toJSON()));
    }
});
return ItemView; 

项模板

<div>
  <div class="itemCorner">&nbsp;</div>
  <div class="itemBrand">
    <img src="<%=Path + BrandImage%>">
  </div>
  <div class="itemImg">
    <img src="<%=Path + PictureName%>">
  </div>
</div>

<div class="bottomRow" style="bottom: 0;height: 90px;">
   <div class="itemName">
      <%=Name%>
    </div>
    <div class="itemPrice">
      <%=PriceShow%>
    </div>
</div>

• 每个列是 ItemView控件和 ItemListView 。

容器和每个项目的高度设置为 100％

height of container and each item are set to 100%

我试过这个解决方案： CSS - 展开孩子DIV高度父母的身高，但我的每一列会粘在一起，这不是我想要的。

I've tried this solution : CSS - Expand child DIV height to parent's height , but each column of mine will stick together, it is not what I want.

我要的是设置这些列的高度等于项目的最高高度;因为每个div的内容是动态生成的，我不能做到这一点。

What I want is to set these column's height to be equal to the tallest height of the items; since the content of each div is dynamically generated, I can not make it.

任何帮助将是AP preciated。请原谅我的无知，如果我完全错过的东西在这里。

Any help would be appreciated. Please excuse my ignorance if I've completely missed something here.

推荐答案

好了，在这里你可以设置高度，你的 itemImg 类。其明显的产品形象方面总是不同的。

Well, Here you can set height to your itemImg class. Its obvious that product image dimension are always different.

此外，不要设置高度和宽度的图像像素。相反，设置了图像容器类的高度和宽度。

Also, do not set the height and width in the pixel for the image. Instead set the height and width for the image container class.

所以你的CSS可能是以下内容：

So your CSS might be following :

.itemImg {
    width: 400px;
    height: 400px;
    border: 1px solid;
    text-align: center;
    float: left;
    margin: 20px;
    position: relative;
    background:#CCC;
}
.itemimg img {
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

和，HTML会同样喜欢你现在所拥有的：

And, html will be same like you have right now:

FIDDLE

在拨弄我有使用三种不同尺寸的图像：

In the fiddle i have use three different dimension images:

这篇关于在骨干JS动态列的高度相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！