HTML / CSS двухколонный макет, который перемещается как одноколонный макет

Question

HTML / CSS двухколонный макет, который перемещается как одноколонный макет

0

Я пытаюсь сделать макет из двух столбцов с краткими списками текста слева и фотографиями справа, вот так...

LIST IMAGE

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

ОБРАЗ

СПИСОК

ОБРАЗ

СПИСОК

ОБРАЗ

СПИСОК

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

http://allgoodeatslocal.com/links.html

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

Любые лучшие идеи?

user3050028 29 нояб. 2013, в 17:52

Источник

0

Переместите ваше изображение в p , оберните текст в span и передайте значение float: left to span
Morpheus 29 нояб. 2013, в 16:46

Теги:

html

css

layout

1 ответ

Ещё вопросы

Переместите ваше изображение в p , оберните текст в span и передайте значение float: left to span

j.h · Answer 1 · 2013-11-29T13-50-00.000Z

Вы можете использовать медиа-запрос, @media, чтобы добиться этого:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Задайте медиа-запрос для меньшего разрешения/экрана и установите ширину списка и изображения div на 100% контейнера, и они должны стекаться.

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