Question

我正在使用两列CSS网格处理网站布局，看起来有点像这样。它工作正常，并且每个div中的所有内容中心都完美无缺。带“ bg”的单元仅具有背景图像。每个网格单元都“触摸”浏览器窗口的边框。

+--------+--------+
|  text  |   bg   |
+--------+--------+
|   bg   |  text  |
+--------+--------+
|       text      |
+-----------------+

但是，是否有一种简单的方法可以将内容包装并居中，以使内容不超过特定宽度？我可以根据段落的单元格将各个段落定位为左对齐或右对齐，但是我想知道是否有更优雅的方法可以做到这一点？括号是“包装纸”。

+--------+--------+
|   [text|  bg]   |
+--------+--------+
|   [bg  |text]   |
+--------+--------+
|   [   text  ]   |
+-----------------+

Answer 1

您可以在整个两列网格上放置一个包装纸，并在包装纸的左侧和右侧添加一些填充。

Answer 2

尝试一下：-

.container {
  display: flex;
  flex-direction: column;
  background: #fcfcfc;
}

.row {
  display: flex;
  flex-direction: row;
  padding: 1em 2em;
  align-items: center;
}

.column {
  background: #fff;
}

.gridbg {
  background-image: url(http://via.placeholder.com/350x150);
  background-repeat: no-repeat;
  background-size: cover;
  height: 20vh;
  width: 50%;
  flex-shrink: 0;
}

.px-2 {
  padding: 0 1em;
}

h2 {
  margin-top: 0;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div>
          <h2>Heading</h2>
          <p>Vestibulum felis ligula, placerat non felis id, hendrerit interdum nunc. Fusce finibus, sapien ac blandit ultrices, est tortor viverra turpis, et venenatis ipsum purus id magna. </p>
        </div>
      </div>
      <div class="row">
        <div class="gridbg">
        </div>
        <div class="px-2">
          <h2>Heading</h2>
          <p>Vestibulum felis ligula, placerat non felis id, hendrerit interdum nunc. Fusce finibus, sapien ac blandit ultrices, est tortor viverra turpis, et venenatis ipsum purus id magna. </p>
        </div>
      </div>
    </div>
  </body>

</html>

如何使内容包装器在CSS网格的“顶部”

2 个答案: