Фундамент выравнивания столбца вправо при использовании гибкой сетки (не сетки ху) - PullRequest
Новая
       27

Фундамент выравнивания столбца вправо при использовании гибкой сетки (не сетки ху)

0 голосов
/ 24 февраля 2020 
<div class="row align-middle">
        <div class="small-4 columns">
            <div></div>
        </div>

        <div class="small-4 columns">
            <div></div>
        </div>

        <div class="small-4 columns">
            <div>I want to be on the right edge of the parent .row</div>
        </div>
    </div>

У меня есть выше.

Я хочу, чтобы div, который находится в третьем .columns div, был выровнен вправо (чтобы он выглядел так же, как если бы я поместите text-align: center на третий .columns div).

Я знаю способ сделать это - поместить еще один .row div в этот столбец и дать этому .row другой класс align-right и добавление еще одного .columns внутрь этой строки - но это приведет к ненужному количеству HTML, и я предполагаю, что Foundation, должно быть, предоставил мне способ (еще один класс CSS, который я не могу найти в документации ) достижения моей цели без дальнейших HTML, чем указано выше.

Как мне это сделать? Или мне нужно поместить еще одну строку и столбец внутри этого третьего столбца?

.columns не имеет display: flex, поэтому я не могу поместить align-right в столбец - не будет работать. Или .columns должен иметь display:flex, и я просто испытываю ошибку или иным образом проблему, которую я, возможно, где-то создал?

Спасибо

1 Ответ

0 голосов
/ 25 февраля 2020

если вы используете версию Foundation 6.5, то следующие замены в коде будут делать то, что вы ожидаете 

<div class="grid-x">
    <div class="small-4 cell">
        <div></div>
    </div>

    <div class="small-4 cell">
        <div></div>
    </div>

    <div class="small-4 cell">
        <div>I want to be on the right edge of the parent .row</div>
    </div>
</div>

Но если вы действительно не хотите использовать классы grid-xy, тогда Вы можете сохранить свой код и использовать вместо этого фундамент 5.5. Надеюсь, это поможет!

...