请参阅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的高度)。怎么做到这一点?请帮忙。
答案 0 :(得分:1)
您必须使用css属性min-height
例如:min-height:85px;
找到合适的最小高度。 我的猜测就像这个小提琴:http://jsfiddle.net/bkpqa/1/或http://jsfiddle.net/bkpqa/2/
如果您加载动态内容,则需要使用min-height
getter调整javascript中的.height()
。