css - 如何做这个布局

问题描述

我正在尝试做这种布局，但很困惑。图像移出容器并分别与右边缘（第一行 div/图像）和左边缘（第二行 div/图像）对齐。我正在使用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 的样式等。我正在考虑并尝试做不同的方法.. 还没有任何效果。

标签： cssmaterialize

所以我所做的就是container从父 div 中删除并将其添加到<p>标签中，因为我们只想要我们的段落（内容）中的容器属性。padding这样做之后，这些中有一些额外的，col所以添加了一个 class.layout和 set 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;
}

css - 如何做这个布局

问题描述

解决方案

推荐阅读