Cloud47
@Cloud47
Frontend, javascript, HTML, CSS

Как сверстать подобный блок с переносом текста на следующую колонку?

Здравствуйте коллеги! Кто сталкивался с подобной версткой, когда нужно, чтобы при нехватке места по высоте, текст переносился на следующую колонку вправо? В принципе была идея сверстать этот блок при помощи css свойства column-count, но график мешает его использовать((
6027e95f41cd7268789125.png
Пытаюсь сделать при помощи css-grid, но пока безуспешно - разделил блок на грид-области и обозначил стартовую позицию для текста, но не знаю как переносить текст на следующие колонки - он просто выходит вниз за пределы грид-контейнера.
::v-deep .grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 180px 180px;
    grid-template-areas:
      'chart chart text text'
      'text text text text';
    &__chart{
        grid-template-area: chart;
        background-color: #333;
    }
    &__text{
        grid-template-area: text;
        background-color: lighten(green, 20%);
        grid-row: 2;
        grid-column: 1;
    }  
}

<div class="grid">
                    <div class="grid__chart">
                        <vue-apex-charts
                        :type="'area'"
                        height="180"
                        width="450"
                        :options="chartOptions"
                        :series="series"
                        ></vue-apex-charts>
                    </div>
                    <div class="grid__text">Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Optio vel animi accusamus tenetur esse repellendus tempora quia, rerum aperiam nobis! Accusamus molestias fugit obcaecati aut provident vel officiis quae enim praesentium, sequi voluptatem magni quaerat! Praesentium, porro! Ut eos repudiandae atque accusantium excepturi culpa eum minus sequi dolores temporibus neque rem asperiores molestias, velit reprehenderit nihil quisquam, non possimus alias aliquam explicabo iure corporis et optio voluptas? Ipsum natus asperiores sunt delectus dolores commodi suscipit omnis, repellendus eaque enim similique soluta par</div>  
 </div>

Как в итоге решить данную проблему? Help!
  • Вопрос задан
  • 534 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Разумнее всего обсудить с заказчиком и дизайнером идею, что тексты под картинкой должны быть независимы от текста в оставшихся 2х колонках. Благо первый столбец и так вполне обособлен.
И показывать так как на макете только на очень ограниченной ширине окна, а на остальных перестраивать вариантами попроще.

Из того, что пришло в голову:

Дальше можно дорабатывать, считая высоту и делая так, чтобы картинка не уходила из второго столбика.
Или по сценарию выше, перестраивать через media в другую раскладку.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@cheeroque
Наркоманский вариант:


Чуть менее наркоманский вариант через clip-path:


Только сейчас увидел, что clip-path не двигает текст, а просто режет его. Увы :) Тогда второй вариант отменяется.
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Никак не сверстать. Можно только самостоятельно запрограммировать так, чтоб текст распределялся по отдельным блокам.
Ответ написан
@forspamonly2
у вас в первой колонке похоже отдельный блок контента, который не переходит в другие колонки?

тогда можно сделать его отдельным элементом и картинка будет залезать только на одну колонку с текстом, а это уже решаемо.

в смысле 1) отдельный блок с первой колонкой с отступом сверху по высоте картинки, 2) блок с тремя цсс-колонками, с отступом сверху в первой колонке по высоте картинки, 3) картинка поверх этих двух блоков.

а так да, нормальных способов нет. адобовскую спецификацию css regions подонки-изготовители браузеров слили, занимаются всем подряд вместо того, что действительно полезно.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы