Как решить проблему адаптивного поведения XY-Grid в Foundation Sites v6.5.3 - PullRequest
Новая
       31

Как решить проблему адаптивного поведения XY-Grid в Foundation Sites v6.5.3

0 голосов
/ 29 марта 2019

Я новичок в Zurb Foundation, но с удовольствием изучаю эту новую структуру.Он заменяет старую рабочую лошадку, которой я пользуюсь много лет, и, кажется, делает почти все, что мне нужно.

К сожалению, есть отзывчивый заголовок, который я пытаюсь выполнить для веб-сайта, и я не могу понять, как этого добитьсяэто в новой XY-Grid.Я немного закрылся, хотя полностью потерпел неудачу с оранжевым блоком на малой точке останова: (

Буду очень признателен за некоторые предложения.

Спасибо, mrEdge

Iне удалось заставить красный элемент подняться под оранжевый и синий цвета при больших размерах (но можно взломать его с помощью отрицательных полей) из-за очистки строк в xy-сетке и отсутствия поддержки операций с плавающей запятой. Новое в Foundation и flex не помогает: (

<div class="grid-x align-right">
    <div class="cell small-5 medium-4 large-3" style="background-color:green;">
        GREEN
    </div>
    <div class="cell small-7 medium-8 large-9">
        <div class="grid-x">
            <div class="cell medium-12 large-7" style="background-color:orange;">
            <!-- Does not yet move above GREEN at small -->
                ORANGE
            </div>
            <div class="cell small-12 medium-12 large-5" style="background-color:blue;">
                BLUE
            </div>
        </div>
    </div>
    <div class="cell small-12 medium-12 large-9" style="background-color:red;">
        <!--Negative margin set at LARGE breakpoint (not a good solution)-->
        RED
    </div>
</div>

Я создал изображение того, чего я пытаюсь достичь, но не могу включить его, поскольку у меня нет репутации более 10 лет. Возможно, эта ссылка будет разрешена: https://i.imgur.com/TBSWGZr.png

1 Ответ

0 голосов
/ 01 апреля 2019

Насколько я понимаю, flexbox просто не был предназначен для того, что вы пытаетесь сделать. Я считаю, что это будет вариант использования для сетки над flexbox .

Если вы действительно хотите придерживаться классов по умолчанию и использовать Foundation, тогда это лучшее, что я мог бы получить (codepen) , основываясь на предоставленном вами изображении. Ваш HTML вверху, а мой внизу, поэтому мы можем увидеть прямое сравнение поведения в точках останова.

Я уверен, что кто-то с лучшими отбивными, чем я, мог бы увидеть другое решение, и в этом случае мне было бы действительно интересно увидеть это! 

<div class="grid-x">
  <div class="orange cell small-12 medium-9 medium-order-2 large-4 large-order-2">
    ORANGE
  </div>
  <div class="green cell small-6 medium-3 medium-order-1 large-4 large-order-1">
    <p>GREEN</p>
    <p>content</p>
  </div>
  <div class="blue cell small-6 medium-9 medium-offset-3 medium-order-3 large-4 large-offset-0 large-order-3">
    BLUE
  </div>
  <div class="red cell small-12 medium-12 medium-order-4 large-8 large-order-4 large-offset-4">
    RED
  </div>
</div>

Как вы можете видеть, когда к каждому div добавляется больше контента, он выталкивает всю «строку» контента, так что все они занимают 100% высоты пространства.

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

Вот отличное руководство по использованию сетки.

...