Я создаю приложение с помощью KnackHQ, онлайн-конструктора баз данных, который позволяет создавать настраиваемые формы и отображать содержимое во встроенном элементе. Каждая часть формы разделена на теги DIV, поэтому css можно применять независимо к каждому из них. Я пытаюсь создать форму с двумя столбцами div в левом и правом столбцах следующим образом:
CSS-код
.left
{
width: 60%;
float: none;
display: block;
clear: left;
}
.right
{
width: 30%;
float: right;
clear: right;
}
Итак, как показано ниже слева, я хочу, чтобы все мои элементы div .left шли влево, а все элементы div .right — вправо. Вместо этого я получаю то, что вы видите ниже справа. Первый div каждого класса выстраивается в линию. Затем появляются все .right div. Наконец, появляются оставшиеся элементы div .left.
Желаемый эффект (слева) и текущий эффект (справа)
См. Изображение: http://i.stack.imgur.com/1jbrm.png
Самая большая часть проблемы в том, что я не контролирую HTML, только CSS. Обычно я бы просто обернул оба столбца в один большой div. Вместо этого мне нужно найти способ сделать это без обертки, поскольку единственный div, окружающий div .left и .right, является оболочкой всего этого.
Вопросы:
Почему плавающие элементы DIV заставляют несколько блочных элементов располагаться внизу плавающих элементов? Как я могу создать 2 столбца с элементами div разного размера, используя плавающие элементы?
