Question

我正在尝试在我的主页的div中显示项目列表。

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>

enter image description here

每列都是ItemView，并由ItemListView组合在一起。
容器的高度和每个项目都设置为100%
我已尝试过这个解决方案：CSS - Expand float child DIV height to parent's height，但我的每一栏都会粘在一起，这不是我想要的。

我想要的是将这些列的高度设置为等于物品的最高高度;由于每个div的内容是动态生成的，我无法做到。

任何帮助将不胜感激。如果我在这里完全错过了什么，请原谅我的无知。

Answer 1

好吧，在这里你可以设置你的itemImg课程的身高。很明显，产品图像尺寸总是不同的。

另外，请勿在图像的像素中设置高度和宽度。而是设置image container class的高度和宽度。

所以你的CSS可能会关注：

.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会像你现在一样：

FIDDLE

在小提琴中，我使用了三种不同尺寸的图像：

Answer 2

 (function(jQuery) {
  jQuery.fn.maxHeight = function() {
    element = this;
    if ( jQuery(window).width() > 768 ) {
      var maxHeight = 0;
      element.height('auto');

      element.each(function(i, value){
        itemHeight = jQuery(value).height();
        if ( itemHeight > maxHeight ) {
          maxHeight = itemHeight;
        }
      });

     element.height(maxHeight); 
    } else {
      element.height('auto');
    }
  };
}(jQuery));

的jQuery（＆＃39; .itemImg＆＃39;）maxHeight（）;

主干js中动态柱的高度相等

2 个答案: