Как переместить 2 внешних столбца под центральным столбцом, используя только HTML и CSS?

Question

Первый взгляд http://jsfiddle.net/b2BpB/15/

3 столбца, выровненные по верху контейнера, центрированного на странице. Когда окно браузера шире контейнера - пример выше хорош.

Когда вы уменьшаете ширину окна браузера - столбцы начинают складываться вниз по странице.

Вопрос: Как сделать так, чтобы внешние два столбца имели z-индекс ниже, чем центральный столбец, чтобы при сжатии окна браузера по ширине вместо столбцов, складывающих страницу, внешние колонны скользят под (позади) центральной колонны?

Примечание: мне нужно сохранить нынешнее поведение. 3 деления выровнять по верхней части контейнера. 3 деления увеличиваются / уменьшаются, чтобы соответствовать их содержимому (нельзя использовать фиксированную ширину, высоты для столбцов)

---

- добавлено 19 апреля 2010 г. в Великобритании -

Этот, кажется, ставит всех в тупик - я добавил еще пару тегов, чтобы посмотреть, сможет ли кто-нибудь еще понять это.

Это может помочь мне и другим, даже если вы опубликуете свои первоначальные идеи и объясните, почему они не будут работать в этом случае - чтобы избежать тупиков.

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

Заранее спасибо ...

- добавлено 19 апреля 2010 13:44 Великобритания -

@ RoToRa - здесь я получаю абсолютное верхнее позиционирование, размер div-ов, чтобы соответствовать контенту, и div-ы, скользящие под главным центральным div, без укладки страницы вниз, когда окно сжато:

http://jsfiddle.net/qr7WB/

Я использовал встроенный стиль - но его легко извлечь в файл CSS - если я когда-нибудь заставлю его делать то, что я хочу.

Если я могу просто получить левый и правый делители, но до центрального деления - только скользя вниз, когда окно браузера заставляет их, тогда бинго!

С точки зрения приложения: я хочу веб-сайт 3 col. Центральный столб содержит основное содержание, и я хочу, чтобы он имел прецедент. Внешние столбцы предназначены для подчиненного контента и рекламы.

Answer 1

Вы имеете в виду, как это?

Пример Fiddle: ЗДЕСЬ

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

Это все с плавающей запятой или встроенный блок, без абсолютного позиционирования, поэтому должен остаться поток, чтобы позволить нижним колонтитулам следовать. Дайте мне знать!: ЗДЕСЬ

Answer 2

Во-первых: это не ответ, однако у меня есть несколько пунктов, и он более читабелен как ответ.

Я не думаю, что вы хотите, возможно.Сдвигать элементы друг под друга - это обычно то, чего хочется избегать, поэтому это не «стандартное поведение» CSS.

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

Лучшее, что я могу придуматьэто JavaScript, который может основываться на существующем макете (чтобы он все равно отображался без JavaScript), и просто «вставлять», когда элементы должны перекрываться.Однако это не будет простым сценарием для написания, потому что вычисление правильной ширины, на которое он тоже должен реагировать, не простое.

Другой альтернативой может быть CSS 3 Media Queries , которыйпозволяют определять различные правила CSS в зависимости от размера окна, однако это потребует точного определения ширины, которую вы хотите изменить.

Как я уже говорил, элементы перекрываются, особенно если они содержат текст, чего можно ожидатьуметь читать - это то, чего обычно стараются избегать.Возможно, вам следует описать свой точный сценарий (какие элементы содержат какую информацию и почему они могут перекрываться) вместо вашего предполагаемого решения, тогда можно будет предложить альтернативы.

Кстати, я не понимаю, как ифреймы вообще связаны с проблемой.