Там, где есть воля, есть способ! Большим недостатком использования фреймворка, в котором используются такие семантики, как «шесть столбцов альфа» и «десять столбцов омега», является то, что они создают ожидание для визуального упорядочения. Шесть столбцов слева, десять столбцов справа, а соглашения об именовании альфа / омега влияют на поля, потому что порядок разметки правильный. Думаю, вы наткнулись на неожиданный сценарий использования автора.
(Кстати, ваша область ten column также содержит изображения, которые переполняют их контейнеры; т. Е. Они не меняются)
Прямой товар:
Мой честный совет для будущей ремонтопригодности - учиться у скелета, брать то, что вы хотите от него, понимая, что делают его разные классы ... и заново изобретать его.
Например, то, что у вас есть на главной странице, представляет собой серию контейнеров функций. Разметка должна выглядеть примерно так:
<div class="featurebox">
<div class="media">Image, slider, or other visual interest items here</div>
<div class="items">Text of items of interest</div>
</div>
<div class="featurebox">
<div class="media">A different image, slider, etc</div>
<div class="items">More text of items of interest</div>
</div>
И затем вы можете стилизовать их, чтобы создать левый-правый эффект. Ключ здесь находится в селекторах. Плавая вправо, а не влево для элементов div внутри каждого другого набора функций, наш эффект легко достигается:
.featurebox { width: 600px; overflow: hidden; clear: both;}
.featurebox div { float: left; }
.featurebox:nth-of-type(odd) div { float: right; }
.items { width: 200px }
.media {background-color: grey; width:400px; height: 100px;}
Скрипка: http://jsfiddle.net/7qRfh/
Проблема в изменении того, что у вас есть в данный момент, заключается в том, что это не соответствует ожиданиям скелета о размещении поплавков слева направо. Если вы хотите сказать «phooey», вы можете идентифицировать свои контейнеры, нацеливаться на каждую секунду и менять ориентацию .columns. Вам также нужно будет переопределить поведение класса омега и альфа, чтобы омега действовала как альфа и наоборот. Беспорядок, на мой взгляд, но это сработает.
Взломать
У меня тут была только скрипка, и я думаю, что закрыл ее. Невозможно найти URL в моей истории, поэтому я не сохранил его первым. : - /
Но неважно. Все сводилось к следующему: вы можете делать то, что вам нужно, с текущей разметкой, но изменения в CSS еще более масштабны и становятся чокнутыми.
Контейнер уже имеет положение: абсолютное, поэтому вы должны отсоединить столбцы «шесть» и «десять», расположить их абсолютно, с «десятью» сверху и «шестью» снизу. Большая проблема заключается в том, что с этим легко справиться: на контейнере, а также на «шестерке» и «десятке» должна быть установлена высота. Абсолютное позиционирование выводит элемент из потока документов, поэтому без высоты он просто превращается в странный беспорядок.
Честно говоря, если вы настаиваете на том, какой он есть, и на разметке, то самым разумным хаком на самом деле окажется JavaScript. Если у вас уже есть jQuery на вашей странице, все проще.