javascript - 两列 DIV

Question

这个问题可能已经被问过很多次了，我尝试了所有我能在 SO 上找到的建议和答案，但都没有成功。

我想要实现的是一组布局如下的框 (div):

只要这些框之间没有空白，顺序并不重要。

这是我的:

<div class="MyList">
   <div class="ListItem" style="height:75px;"><span>Box 1</span></div>
   <div class="ListItem" style="height:65px;"><span>Box 2</span></div>
   <div class="ListItem" style="height:45px;"><span>Box 3</span></div>
   <div class="ListItem" style="height:85px;"><span>Box 4</span></div>
   <div class="ListItem" style="height:25px;"><span>Box 5</span></div>
</div>

和

.MyList
{
    overflow:auto;
    background:lightgray;
    width:240px;
}
.ListItem {
    color: #000;
    background: white;
    border: 1px solid grey;
    min-height: 2em;
    width: 100px;
    padding: 0.5em 0.5em 0em 0.5em;
    border-radius: 3px;
    float: left;
    cursor: pointer;
}

And here is the result (fiddle) :到目前为止，我可以得到这个:

我不能:

• 使用 IE 不支持的 css column 属性 :(
• 使用 javascript (Columnizer) 将我的 div 分成两组。这是因为我将这些图 block 变成了可拖动对象和 javascript 代码大大阻碍了我的应用程序的可用性。
• 我不能对左右框使用特殊选择器，因为框列表是动态的(生成的剔除)

这甚至可以实现吗？

Answer 1

.leftBoxes
{
  display: inline; 
  float: left; 
  width: 49%; 
}
.rightBoxes
{
  display: inline;
  float: right; 
  width: 49%;
}
#box1
{
  height: 100px;
}
#box2
{
  height: 20px;  
}