如何让html元素覆盖并延伸到CSS之外；栏「；

我需要的是一个基于2列的布局，内容可以动态加载，并根据需要均匀分布在尽可能多的空间上

所以我认为CSS列是最合适的。这是针对上述情况的但是内容不是纯文本，它实际上是带有潜在下拉列表的输入元素，我正在使用twitter的typeahead

但是这个下拉列表，当然应该被列机制忽略，并且应该覆盖在列上，甚至可能从中伸出

以下是一幅图像，用于说明所需的效果：

我假设嵌套div的绝对定位可以做到这一点，但没有运气。没有JS有没有办法实现这种魔法

<fieldset>
    <div class="item">
        <input type="text"/>
        <div class="dropdown"></div>
    </div>
    <div class="item">
        <input type="text"/>
    </div>
    <div class="item">
        <input type="text"/>
    </div>
</fieldset>

查看钢笔：

---

更新：可能是您已经让它工作了吗？我刚刚添加了背景色，使其可见

字段集{
列数：2；
柱间距：20px；
宽度：200px；
}
.项目{
位置：相对位置；
-webkit列内部中断：避免；
}
奥托普先生{
位置：绝对位置；
高度：200px；
宽度：200px；
z指数：10；
背景色：rgba（0,0,0,0.5）；
}

清单项目1
清单项目2
清单项目3

要共享您的代码笔，您需要点击“保存”按钮生成url。给定的链接指向“创建新代码”页面。（facepalm）thanx@lupzNo。其实一点也不。应该“覆盖”列的div“onTop”需要嵌套在“item”中，并且应该覆盖它下面的元素。就像下拉菜单一样。笔现在应该可以用了。您可能需要刷新此页面。只是和同事再核实一下。钢笔在用。奇怪，它不是为我装的。无论如何，我更新了我的答案。覆盖确实覆盖了字段集中的其他输入元素，但它们应该“从基于列的字段集中突出”，并且应该完全忽略该列。如果从“项目”中删除“相对”定位，您将获得所需的效果，只是定位已关闭。并且您确实需要在列计数和间距前添加供应商前缀（-webkit-例如）。为了使codesnipplet简单，我删除了它们。