两列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)： 到目前为止，我可以得到这个：

我不能：

• 使用css列属性，因为IE不支持：（
• 使用javascript（Columnizer）将我的div分成两组。 这是因为我将这些图块变成了draggables和javascript代码 严重阻碍了我的应用程序的可用性。
• 我不能在左右框中使用特殊选择器，因为框的列表是动态的（挖空生成）

这是否可以实现？

Answer 1

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

Answer 2

为什么不创建<table>？

<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>

会改为

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

*我喜欢桌子：P

这是JFiddle重新编辑。

Answer 3

创建两个浮动到左侧<divs>的列（没有“列”属性），并按所需顺序将框放入其中。

<div class="MylistPart">
 <div>
   <div class="ListItem" style="height:75px;"><span>Box 1</span></div>
   <div class="ListItem" style="height:65px;"><span>Box 2</span></div>
 </div>
 <div class="MylistPart">
   <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>
</div>

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

修改 我编辑了您的解决方案并添加了浮动，现在它正常工作（jsFiddle 尽管特殊选择器用于左侧和右侧列，但这些可以很容易地与动态内容一起使用，其中初始数组的盒子必须分成两部分，然后让敲出循环通过这两部分来显示它们。