Divs бок о бок без поплавков или позиции: абсолют

Question

Я пытаюсь найти способ размещать div рядом друг с другом без использования float или position: absolute.У div'ов будет установленная ширина, и внутри них могут быть плавающие элементы.Это для CMS, где пользователь сможет перетаскивать элементы контента для их организации.Они не должны быть divами, я просто не знаю ни одного другого типа HTML-тега, который бы работал лучше.

В основном конечный результат для CMS, в которой пользователь может организовывать элементы содержимого, перетаскивая их.К сожалению, с помощью float, если вы хотите сделать что-нибудь, что включает в себя размещение div друг под другом, все упадет ниже самого высокого div над ним, даже если оно может поместиться под чем-то другим.то есть 3 элемента, 2 из которых должны быть сложены слева с третьим справа, высота которого находится где-то посередине между ними.

Встроенный блок отсутствует, так как он не поддерживается IE (хотя я хотел бы быть членом и просто иметь хромированную раму ...) и в любом случае не работает для этой цели.

Answer 1

Меня немного смущает, что вы упоминаете перетаскиваемые элементы, но в вашем заголовке говорится, что вы не хотите использовать положение: абсолютное в качестве решения ... большинство скриптов, которые мне известны, используют это для процесса перетаскивания, так почемуВы не используете его для позиционирования рядом друг с другом?

Answer 2

У вас есть фиксированное количество столбцов, т.е. элементов, расположенных горизонтально рядом?Если да, то одна вещь, о которой я могу подумать, это наличие этих множества неупорядоченных списков, и каждый элемент будет li. Когда элемент перетаскивается внутри одного и того же ul, его индекс в ul изменяется.Когда он перетаскивается через ULS, он удаляется из этого списка, добавляется в другой и упорядочивается, как в случае 1. Просто представьте себе идею прямо сейчас ... придется попробовать

Answer 3

Вы просто ищете способ перетаскивания и организации контента?Вы видели "сортируемый" пользовательский интерфейс JQuery?

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

Answer 4

Единственный вариант, о котором я могу подумать - не использовать методы, которые вы упомянули (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 */}

Это лучшее, что я могу придумать, и мне не нравится использовать таблицы для не табличных целей. Но каждому свое. = /