Question

请参阅fiddle

这里我们将内容显示为

BOX1

BOX2

BOX3

box4

了Box5

BOX6

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

box1 box4

box2 box5

box3 box6

我们使用的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的高度）。怎么做到这一点？请帮忙。

Answer 1

您必须使用css属性min-height

例如：min-height:85px;

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

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

multicolumn css使相邻的div处于相同的高度

1 个答案: