Блог

Главная - Вопросы по программированию - Как мне создать макет блейда

Как мне создать макет блейда

#html #css

#HTML #css

Вопрос:

Я хочу создать макет приложения с использованием «блейдов» следующим образом:

Высота блейда всегда будет равна 100VH.

Ширина блейда будет переменной.

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

Примером этого является текущий портал Azure. Каждый раз, когда вы нажимаете на элемент, появляется новый блейд с более конкретными данными об этом элементе.

Но я не уверен, как начать с этого. Самое близкое, что я могу придумать, — это использовать сеточную систему bootstrap, но ширина необязательно будет соответствовать используемой там сеточной системе. Я даже не знаю, правильный ли термин «блейды», но это то, что используется командой Azure.

 <div style="height: 100vh; background: greenyellow; width: 200px"></div>
<div style="height: 100vh; background: pink; width: 200px"></div>

Вышеуказанное должно располагаться рядом, с зеленовато-желтым слева и розовым справа от него. Вместо желто-зеленого над розовым.

Вот скриншот портала Azure. Он имеет 3 «блейда»

Портал Azure

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

1. Пожалуйста, предоставьте свой пробный код

2. Хорошо, я посмотрю, смогу ли я что-нибудь придумать.

3. Если вы имеете в виду это epvpimg.com/41P0f Я бы назвал идентификационные карты в сеточной системе

4. Я понимаю, что иногда трудно начать, но экран поможет нам помочь вам. Пожалуйста, предоставьте.

5. Предоставлен снимок экрана. @DestinatioN, это более старый портал Azure

Ответ №1:

Я нашел flexbox:

  <style>
    .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
    }

    .flex-item {
        background: tomato;
        padding: 5px;
        width: 200px;
        height: 100vh;
        margin: 5px;
        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
    }
</style>
<ul class="flex-container">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
</ul>

Приемы CSS для Flexbox