Создание 2-х столбчатых макетов в CSS

Я работаю над интерфейсом для небольшого веб-модуля и имею некоторые проблемы с CSS. Прямо сейчас у меня есть контейнер DIV, а затем таблицы для размещения разделов. Я плаваю по 3 столам слева и 3 столам вправо, которые до сих пор отлично работали.Создание 2-х столбчатых макетов в CSS

Недавно я добавил функцию, которая позволяет добавлять дополнительные поля пользователем по мере необходимости и по мере роста высоты таблицы в правом столбце разбивает макет. Есть ли лучший способ сделать это, чтобы макет не сломался?

enter image description here

После добавления "ясно: левый" и "ясное: право" каждой таблицы, это выглядит следующим образом ...

enter image description here

После перемещения 3 осталось плавали таблиц в верхней части кода и удалении «float: right/clear: right» из другого 3, он работает хорошо, за исключением этого.

enter image description here

источник

2013-05-21 Anonymous

Для каждого поплавка влево добавьте clear: left, для каждого поплавка вправо, добавьте clear: right.

Это будет зависеть от порядка каждого флотируемого контейнера. Другим вариантом было бы попытаться сохранить один набор поплавков из одного столбца (т. Е. Поместить float left или float rights) и удалить свойство float из других в другом столбце, чтобы они переместились в сторону поплавковых ящиков.

EDIT: рабочий пример: http://cssdesk.com/Xan5j

источник

2013-05-21 09:23:28 crdunst

Добавление четкости: влево/вправо улучшилось, но имеет очень странное поведение. Теперь он сохраняет таблицы в своих соответствующих столбцах, но после добавления определенного количества новых полей кнопка отправки перемещается, а остальные таблицы выстраиваются в очередь странными (т. Е. «Учетные данные IPMI/DRAC», расположенные рядом с «Assigned Inventory») В начальном вопросе я опубликовал новый скриншот. Если вы не ответите, я просто буду принимать это как ответ в любом случае через 24 часа. –

У вас есть контроль над порядком вывода блоков? Я вижу, что порядок, который они в настоящее время выводят, - это «устройство» - «сеть» - «сконфигурировано» - «idmi» .. потому что «сконфигурированный» блок плавает вправо, следующий поплавок влево автоматически очищает его. если вы можете изменить порядок, сначала выведите все ваши левые столбцы, поплывтесь влево, а затем удалите свойство float из правых блоков столбца, и они заполнит пробел справа ... – crdunst

Я сделал, как было предложено, плавая Сначала 3 левой таблицы, затем добавили 3 правые таблицы и удалили из них свойства float/clear. Он выглядел корректно (за исключением того, что расстояние между двумя столбцами исчезло из-за поплавка: право удалено).После добавления полей 4+, «RDP/SSH Credentials» перескакивает влево, потому что содержимое справа значительно длиннее, и ничего не осталось, чтобы заполнить его. Это значительно лучше на практике, но после этого создается очень странный пробел (новый снимок экрана добавлен в первый пост). –

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

источник

2013-05-21 05:16:14

К сожалению, что это Админ модуль боковой и это займет довольно много времени, чтобы извлечь код и сделать его автономным. Тем не менее, я попытался сделать два DIV внутри контейнера div и вместо того, чтобы плавать над таблицами, просто поместите 3 в каждый DIV, но он не работает. Возможно, я сделал что-то неправильно, поэтому я дам этот очередной выстрел! –

ОК, удачи. Глядя на ваш снимок экрана, я заинтригован тем, что вы делали, чтобы получить результат в первом изображении. Являются ли коробки только плавающими? –

Поскольку код довольно длинный, я положил его на пасти для вас по адресу http://pastie.org/7942588. С тех пор я добавил строки «clear: left/right», как было предложено в другом ответе, но с удаленными, что как я его первоначально устанавливал. –

Создание 2-х столбчатых макетов в CSS

ответ

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