У CSS есть div, который находится справа под левым div.Divs обратны в HTML

Question

Описание немного сбивает с толку, но у меня есть два div. Тот, который находится слева на странице, тот, который сидит справа через поплавки. Один справа - первый в HTML, второй - второй. По сути, я хочу, чтобы левый div располагался сверху, а правый div - под ним. Если бы левый и правый были в порядке в HTML, это было бы так же просто, как удаление поплавков. Однако, поскольку это не так, мне нужно немного руки. Вот jsfiddle, который у меня есть: http://jsfiddle.net/7bTjj/

Answer 1

Назад в тот день вы должны были бы использовать абсолютное позиционирование. Теперь вы можете решить эту проблему, используя свойства CSS3, созданные для управления макетом.

Используйте свойства display:box и box-ordinal-group, чтобы отобразить содержимое вашего .container в любом порядке, без использования поплавков:

(-webkit префиксы поставщиков только для простоты)

.container, .left, .right {
  display:-webkit-box;
  -webkit-box-orient: vertical;
}

.left {
  -webkit-box-ordinal-group: 1;
}

.right {
  -webkit-box-ordinal-group: 2;
}

Поскольку вы ориентируетесь на мобильные устройства, отсутствие поддержки IE не должно быть проблемой.

Вот моя вилка вашей скрипки .

Isotoma имеет хорошее, читабельное введение в flexbox , на которое я ссылался при настройке вашего CSS.

Answer 2

Если вы знаете height и width элементов, это возможно с margin.

.left {
  height:20px;
  width:70%;
  float:left;
  margin-left:-30%;
}

.right {
  width:30%;
  float:left;
  margin-top:20px;   
}

Демо

Если вы нет, JavaScript может быть необходимым.Вот аналогичный вопрос .