Удобная и гибкая CSS-сетка без JS - PullRequest
Новая
       14

Удобная и гибкая CSS-сетка без JS

1 голос
/ 23 февраля 2012

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

Сценарий Мы используем адаптивную (основанную на медиа-запросах) сетку 960.Есть четыре div с содержанием.Эти четыре элемента должны быть семантически расположены в порядке, показанном на рисунке ниже.Так как это сетка 960, у нас также есть div-оболочки для "строки" - например: 

<div id="topzone">
  <div id="one">1</div>
  <div id="two">2</div>
</div>
<div id="bottomzone">
  <div id="three">3</div>
  <div id="four">4</div>
</div>

У Div один вводится в статью, у Div два есть реклама, у Div три есть фактическая статьяи у div четыре есть случайные вещи (фиды в Facebook, что угодно).

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

Пока все хорошо.Вот кикер:

  1. Мы не знаем, какой будет высота div-ов - они будут меняться с каждой страницей (даже рекламной).
  2. Не может бытьлюбые вертикальные промежутки между div.
  3. Мы не можем использовать Javascript (или действительно, действительно, действительно, действительно не хотим - мы знаем, что мы можем сделать это легко с JS)

Если вы просто плаваете влево и вправо, вы получите пробелы: 

<div id="topzone">
  <div id="one" style="float: left; height: 300px">1</div>
  <div id="two" style="float: right; height: 200px">2</div>
</div>
<div id="bottomzone">
  <div id="three" style="float: left; height: 100px">3</div>
  <div id="four" style="float: right; height: 300px">4</div>
</div>

Попытки решения Таблицы CSS не допускают пробелы строк.Временные решения: либо накладывают пустой div , либо оставляют пропуски .

Masonry CSS упорядочивает div по вертикали, так что мобильный будет неправильно отбрасывать div два ичетыре ниже единицы и три.

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

    <style type="text/css">
        #one {
            height: 300px;
            background-color: yellow;
        }

        #two {
            height: 200px;
            background-color: brown;
        }

        #three {
            background-color: blue; /* only shows in mobile, otherwise hidden behind #one */
        }
        #three-inner {
            height: 100px;
            border: 2px solid black;
        }
        #four {
            height: 300px;
            background-color: burlywood;
        }

        /* Non-mobile */
        @media all and (min-width: 740px) and (min-device-width: 740px), 
                       (max-device-width: 800px) and (min-width: 740px) {
            #one {
                float: left;
                width: 50%;
            }
            #two {
                float: right;
                width: 50%;
            }
            #three {
                height: 0px; /* turns into overflow */
                width: 50%; 
            }
            #three-inner {
                clear: left;
            }
            #four {
                float: right; 
                width: 50%;
                clear: right;
            }
        }

    </style>
    <div id="topzone">
        <div id="one">
            <p><strong>First block.</strong></p>
        </div>
        <div id="two">
            <strong>Second block</strong>
        </div>
        <div id="bottomzone">
            <div id="three">
                <div id="three-inner">
                    <p><strong>Third block.</strong></p>
                </div>
            </div>
            <div id="four">
                <p><strong>Fourth block.</strong></p>
            </div>
        </div>
    </div>

Там должен быть способом сделать это во всех CSS - скажите мне, что есть?

...