Divs бок о бок без поплавков или позиции: absolute

Я пытаюсь найти способ разместить divs бок о бок, не используя поплавки или позицию: абсолютный. Дивы будут иметь заданную ширину и могут иметь элементы внутри. Это для CMS, где пользователь сможет перетаскивать элементы контента для их организации. Они не должны быть divs, я просто не знаю ни одного другого тега HTML, который будет работать лучше.Divs бок о бок без поплавков или позиции: absolute

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

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

источник

2010-07-08 sgrif

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

источник

2010-07-08 17:15:04 ScottS

Абсолютная позиция используется во время перетаскивания элементы, но после его размещения он больше не используется. Прямо сейчас я использую функцию сортировки jqueryUI для этого, но я перестраиваю его, чтобы быть более надежным. Причина, по которой я не могу использовать position-absoulte, состоит в том, что у div могут быть элементы, внутри которых они расположены, что заставляет эти элементы находиться повсюду. – sgrif

Но, учитывая ваши требования к укладке более коротких предметов рядом с более высокими предметами (как вы упомянули), мне кажется разумным оставить все, что всегда позиционируется абсолютно, независимо от того, перетаскивается ли оно или нет. Почему вы не хотите оставить их в позиции после события перетаскивания? Если он работает для мобильного элемента, кажется, что это не большая проблема, чтобы оставить его для неподвижного элемента. – ScottS

Я знаю, что поведение поплавка варьируется в зависимости от браузера, и я специально не пытался сделать то, что вы пытаетесь сделать, но, как правило, я считаю, что поплавки должны оставаться на месте, основываясь на контейнере, в котором они находятся, поэтому я не уверен, элементы в абсолютно позиционированных divs будут проблемой с сохранением их на месте внутри этого конкретного div. Они не должны взаимодействовать друг с другом между div, потому что каждый абсолютный элемент должен находиться вне потока страницы. – ScottS

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

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

источник

2010-07-08 17:21:30

К сожалению, использование его в качестве таблицы создает те же проблемы, о которых я упомянул в поплавках. Он отлично работает, если вы просто создаете столбцы, но если на следующей строке у вас есть какие-то div, все не будет организовано, как пользователь будет думать, что нужно. – sgrif

Вы только что искали способ перетаскивания и организации контента? Вы видели JQuery UI «Сортировка»?

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

источник

2010-07-08 17:25:04 amfeng

Нет, я не ищу способ перетащить. Это на самом деле то, что я использовал изначально, но сейчас я его перестраиваю, чтобы быть более надежным, так как просто их сортировка становится неудобной в 3d, если ваши объекты имеют заданную ширину, и нет способа обрабатывать такие вещи, как дополнительные пробелы и т. Д. Я перестраиваю его в системе, которая просто использует jquery ui draggable, с некоторыми настройками, чтобы привязать ее к краям, подобным photoshop, и иметь возможность размещать divs внутри других div с помощью float. – sgrif

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

источник

2010-07-08 17:31:19 naiquevin

Нет, у меня нет фиксированного количества столбцов, и любые столбцы, созданные пользователем, не обязательно охватывают весь документ. Система фокусируется на свободных плавающих блоках, а не на столбцах. – sgrif

Divs бок о бок без поплавков или позиции: absolute

ответ

Смежные вопросы