Question

我正试图找到一种方法来并排放置div而不使用浮点数或位置：绝对。 div将具有设定的宽度，并且可能在其内部具有浮动元素。这适用于CMS，用户可以拖动内容元素来组织它们。它们不一定是div，我只是不知道任何其他类型的HTML标签可以更好地工作。

基本上，最终结果是CMS，用户可以通过拖动来组织内容元素。不幸的是，对于花车，如果你想做任何涉及将div放在彼此之下的事情，那么一切都将下降到它上面最高的div之下，即使它可能适合其他东西。即3个元素，其中2个应该堆叠在左边，第三个元素位于右边，高度介于两者之间。

由于IE不支持Inline-block（虽然我很想成为一个鸡巴，只需要镀铬框架......）但无论如何都不能用于此目的。

Answer 1

我有点困惑你提到拖动元素，但你的标题声明你不想使用position：absolute作为解决方案...我知道大多数脚本都用于拖动过程，为什么会你不是用它来定位它们并排放置它们吗？

Answer 2

您是否有固定数量的列，即并排水平排列的元素？如果是的话，我能想到的一件事是拥有那些许多浮动的无序列表，每个元素都是一个li 当元素在同一个ul内拖放时，ul中的索引会发生变化。当它被拖过uls时，它从这个列表中移除并附加到另一个并按照案例1排列。现在就有一个想法......将不得不尝试它

Answer 3

我能想到的唯一选择是不使用您提到的技术（position:absolute，display: inline-block和float）来使用表格。

<table>
    <tr>
        <td><div id="div1">...content...</div></td>
        <td><div id="div2">...content...</div></td>
    </tr>
</table>

您可以使用：

<div id="container">
    <div id="div1">...content...</div>
    <div id="div2">...content...</div>
</div>

用css：

#container {display: table; } /* you might need another child div with 'display: table-row' but I can't remember off-hand */
#div1 {display: table-cell; width: 50%; /* other css */}
#div2 {display: table-cell; /* width: 50%; other css */}

这是我能想到的最好的，我不喜欢将表用于非表格目的。但是每个人都有自己的。 = /

Answer 4

您是否只是在寻找拖放和整理内容的方法？您是否看过JQuery UI的“可排序”？

http://jqueryui.com/demos/sortable/

并排划分没有浮动或位置：绝对

4 个答案: