Блог

Главная - Вопросы по программированию - Плитки Bulma по умолчанию не имеют значения по горизонтали

Плитки Bulma по умолчанию не имеют значения по горизонтали

#css #bulma

#css #bulma

Вопрос:

Согласно документам Bulma по плиткам (https://bulma.io/documentation/layout/tiles /) Я бы ожидал, что следующее приведет к созданию двух горизонтальных рядов по два изображения в каждом. Вместо этого он создает строку из четырех вертикальных изображений, причем первое, второе, третье и четвертое несколько ближе друг к другу.

     <div class="tile is-ancestor">
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image1.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image2.svg"></div>
        </div>
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image3.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image4.svg"></div>
        </div>
    </div>

Я смог добиться желаемого поведения, применив display: flex к is-parent div (на самом деле это класс, который я ожидал бы, а не display: block то, что устанавливает Bulma), но, насколько я понимаю, плитки Bulma должны располагаться горизонтально по умолчанию. Я ошибаюсь или делаю что-то не так?

Большое спасибо.

Ответ №1:

Правильный способ сделать это — определить два divs с помощью class is-ancestor :

     <div class="tile is-ancestor">
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image1.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image2.svg"></div>
        </div>
    </div>
    <div class="tile is-ancestor">
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image3.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image4.svg"></div>
        </div>
    </div>

Комментарии:

1. Спасибо за ответ! Я думаю, вы правы, что именно так это и должно быть настроено; но он по-прежнему создает две группы вертикально выровненных изображений для меня. По крайней мере, на данный момент обходной путь работает достаточно хорошо!

2. Это именно то, что это делает. Разве это не то, о чем вы просили?

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