Как сделать этот макет

Question

Я пытаюсь сделать этот макет, но запутался. Изображения перемещаются из контейнера и выравниваются по правому краю (первая строка div / image) и левому краю (вторая строка div / image) соответственно. Я использую materializecss. Ценю любую помощь. Большое спасибо.

Я прошу прощения за то, что оставил это. Вот часть HTML:

<div class="container">
<div class="row">
    <div class="col s12 m12 l5">
        <p>
            Action item goalposts i'll book a meeting so we can solution this before the sprint is over or organic growth low hanging fruit customer centric three-martini lunch. Organic growth into the weeds translating our vision of having a market leading platfrom and get six alpha pups in here for a focus group, or one-sheet.
        </p>
    </div>
    <div class="col s12 m12 l6 offset-l1">
        <img src="https://picsum.photos/id/1/800/300" alt="" class="responsive-img">
    </div>
</div>
<div class="row">
    <div class="col s12 m12 l5">
        <img src="https://picsum.photos/id/1/700/300" alt="" class="responsive-img">
    </div>
    <div class="col s12 m12 l3 offset-l1">
        <p>
            Hit the ground running price point it's a simple lift and shift job. Clear blue water i’ve been doing some research this morning and we need to better, Q1 mobile friendly.
        </p>
    </div>
    <div class="col s12 m12 l3">
        <p>
            Pull in ten extra bodies to help roll the tortoise downselect but we need to touch base off-line before we fire the new ux experience. 
        </p>
    </div>
</div>

Что касается части css, просто стиль для p и т. Д. Я думаю и пытаюсь использовать другие методы ... пока ничего не получалось.

Answer 1

Итак, я удалил container из родительского div и добавил его в тег <p>, потому что нам нужны свойства контейнера только в нашем абзаце (контенте). После этого в этих col было добавлено несколько padding, поэтому мы добавили класс .layout и установили padding: 0 !important;. Небольшая настройка помогла в создании этого макета, вы также можете настроить его с помощью Chrome Dev Tool, используйте его, это отличный инструмент.

Рабочая демонстрация - Codepen

HTML

<div class="row">
    <div class="col s12 m12 l5 layout">
        <p class="container">
            Action item goalposts i'll book a meeting so we can solution this before the sprint is over or
            organic growth low hanging fruit customer centric three-martini lunch. Organic growth into the
            weeds translating our vision of having a market leading platfrom and get six alpha pups in here for
            a focus group, or one-sheet.
        </p>
    </div>
    <div class="col s12 m12 l6 offset-l1 layout">
        <img src="https://picsum.photos/id/1/800/300" alt="" class="responsive-img">
    </div>
</div>
<div class="row">
    <div class="col s12 m12 l5 layout">
        <img src="https://picsum.photos/id/1/700/300" alt="" class="responsive-img">
    </div>
    <div class="col s12 m12 l3 offset-l1 layout">
        <p>
            Hit the ground running price point it's a simple lift and shift job. Clear blue water i’ve been
            doing some research this morning and we need to better, Q1 mobile friendly.
        </p>
    </div>
    <div class="col s12 m12 l3 layout">
        <p class="container">
            Pull in ten extra bodies to help roll the tortoise downselect but we need to touch base off-line
            before we fire the new ux experience.
        </p>
    </div>
</div>

CSS

.layout{
    padding: 0 !important;
}

Answer 2

Существует несколько хороших документов по сетке Materialise: https://materializecss.com/grid.html.

Попробуйте сделать что-то подобное, когда у вас есть 2 столбца внутри структуры контейнера в двух разных строках.

<div class="container">
<div class="row">
  <div class="col s3">3-columns (one-fourth)</div>
  <div class="col s3">3-columns (one-fourth)</div>
</div>
<div class="row">
  <div class="col s3">3-columns (one-fourth)</div>
  <div class="col s3">3-columns (one-fourth)</div>
</div>

Редактировать: добавить этот тег стиля и код в нем в теги головы под заголовком:

    <style>
    .border-container {
        margin-top: 55px;
        border: 2px solid black;
        padding: 10px;
        height: 100% !important;
        width: 100% !important;
    }
    </style>

Вершина поля подтолкнула divвниз, чтобы вы могли видеть изображение и текст.Кроме того, я добавил границу, используя свойство css border.