Медиа-запросы и 2 колонки макета: произвольное расположение - PullRequest
Новая
       14

Медиа-запросы и 2 колонки макета: произвольное расположение

1 голос
/ 21 марта 2012

Мы только что приступили к редизайну нашего сайта, следуя адаптивному веб-дизайну + философия и руководящие принципы для мобильных устройств.

На определенной странице мы сталкиваемся со следующей ситуацией: в «мобильном представлении»На странице мы хотим, чтобы элементы располагались так, как показано в левой части изображения.

The two desired layouts

Именно поэтому в HTML эти элементы объявлены следующим образом: 

<div id="container">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E">E</div>
</div>

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

Общий вопрос, который решает нашу конкретную проблему с этой страницей:Можно ли разместить произвольные элементы в каждом из двух столбцов без необходимости изменять разметку HTML между двумя версиями?Было бы очень желательно чистое решение CSS.

Примечание: высота элементов неизвестна, а ширина указана в процентах.

РЕДАКТИРОВАТЬ: Для пояснения и в отношении нашего конкретного случая нам нужно, чтобы элемент E был прикреплен к пункту B, а не выровнен по вертикали к D. Эта скрипка показывает то, что нам не нужно.

Ответы [ 3 ]

1 голос
/ 21 марта 2012

Вы можете плавать A, C и D вправо. Однако вам может потребоваться применить overflow:auto к B и E. Также обратите внимание, что если B больше A, то C отталкивается для выравнивания соответственно.

Fiddle

1 голос
/ 21 марта 2012

Не могли бы вы сделать что-то подобное? 

<div id="container">
    <div id="A">A</div>
    <div id="B" class = "left">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E" class = "left">E</div>
</div>
<style>
.left { float:left; }
</style>

Вы можете просто установить float: left в нужном медиазапросе и игнорировать его в другом.

Edit:

В ответ на отзывы OP о том, что B и D не сидят прямо друг на друге, пересматривая код для плавания: право исправляет это. т.е. 

<div id="container">
    <div id="A" class = "right">A</div>
    <div id="B" >B</div>
    <div id="C" class = "right">C</div>
    <div id="D" class = "right">D</div>
    <div id="E" >E</div>
</div>
<style>
.right { float:right; }
</style>
0 голосов
/ 21 марта 2012

Для нормальной раскладки вы должны сделать это следующим образом. Обе div s следует оставить плавающими. 

<div id="container1">
    <div id="left">
        <div id="B">B</div>
        <div id="E">E</div>
    </div>
    <div id="right">
        <div id="A">A</div>
        <div id="C">C</div>
        <div id="D">D</div>
    </div>
</div>

Проблема в том, что в мобильной версии используется другое устройство. Поэтому одним из решений является создание другой версии для мобильной страницы и скрытие #container1 (и наоборот для другого сайта). 

<div id="container2">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E">E</div>
</div>
...