将多个固定宽度/可变高度框浮动到2列 [英] Float multiple fixed-width / varible-height boxes into 2 columns

问题描述

我会尽我所能解释这个。我有多个固定宽度但可变高度的div。我想将这些框浮动在固定宽度的容器内的两列。当给他们一个float：left值，我会得到这样：

I'll try to explain this as best I can. I have multiple divs that are fixed-width but variable height. I want to float these boxes into two columns inside a fixed-width container. What happens when a give them all a float: left value, I get something like this:

######### ######### 
# box 1 # # box 2 # 
######### # ..... # 
......... # ..... # 
......... ######### 
######### ######### 
# box 3 # # box 4 # 
# ..... # # ..... # 
######### #########
######### #########
# box 5 # # box 6 #
# ..... # #########
# ..... #
#########

（期间是空格）

我真正想要的是盒子顶部3触摸盒子的底部1.任何简单的方法来实现这个？

What I really would really like is the top of box 3 to touch the bottom of box 1. Any easy way to acheive this?

编辑：想要找到适用于超过2列的解决方案。

Would like to find a solution that works for more than 2 columns. The perfect soution woudl work with an elastic layout and spread to as many columns as would fit on the screen horizontally.

推荐答案

你需要一个简单的解决方案。

You need to alternate left and right floating on your boxes.

  .box:nth-child(2n+1){
    float: left;
  }
  .box:nth-child(2n){
    float: right;
  }

警告此代码与旧版浏览器不兼容，每隔一个框以编程方式设置不同的CSS类。

Warning this code is not compatible with older browsers, for those you might want to set a different CSS classes programmatically every other box.

这篇关于将多个固定宽度/可变高度框浮动到2列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！