Question

我正在尝试进行此布局，但感到困惑。图像移出容器并分别与右边缘（第一行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等的样式。我正在考虑并尝试做不同的方法。

Answer 1

在Materialize网格上有一些不错的文档：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属性添加了边框。

Answer 2

所以我要做的是从父div中删除container并将其添加到<p>标记中，因为我们只希望在我们的段落（内容）中使用容器的属性。完成此操作后，在这些padding中还有一些额外的col，因此添加了一个类.layout并设置了padding: 0 !important;。进行一些微调有助于布局，您也可以借助Chrome Dev Tool进行微调，使用它，这是一个很棒的工具。

Working Demo - 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;
}

如何进行此布局

2 个答案: