2

请参考小提琴

在这里，我们将内容显示为

盒子1

盒子2

盒子3

盒子4

盒子5

盒子6

使用多列 css 我们将显示更改为

盒子1 盒子4

盒子2 盒子5

盒子3 盒子6

我们使用的css如下：

      .columnsmulti {
            -moz-column-count: 2;
        -moz-column-gap: 10px;
        -moz-column-rule: 0px double #666;
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        -webkit-column-rule: 0px double #666;
        column-count: 2;
        column-gap: 10px;
        column-rule: 0px double #666; width:400px;
    }  


    .blue_bx{ width:190px; background:#6BBEBD; background-repeat:repeat-y; float:left; font-family:Georgia, "Times New Roman", Times, serif;}

    .store_img img{ width:188px; height:75px; margin-top:1px; margin-left:1px; border:0px;}

    .store_name { float: left; width:150px; }

    .circle_ico{ float:right; padding-top:5px; padding-right:8px;}

    .store_name, .store_name a{ color:#FEFFD6;  font-family: 'impactregular'; font-size:20px; padding-left:5px; }

    .store_category, .store_category a{ width:170px; margin:0 auto; font-size:14px; color:#FDF279; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;  }

现在所需的输出是：相邻的 div 框应该在相同的高度（如果框 1 的内容大于框 4，那么框 1 和框 4 应该在框 1 的高度）。如何做到这一点？请帮忙。

4

1 回答 1

1

您必须使用 css 属性min-height

例如：min-height:85px;

找到一个合适的最小高度。我的猜测是这样的小提琴： http: //jsfiddle.net/bkpqa/1/或http://jsfiddle.net/bkpqa/2/

如果您加载动态内容，则需要min-height在 javascript 中使用.height()getter 进行调整。

于 2013-01-03T06:50:25.750 回答