Как сделать обёртку контента "сверху" из CSS-сетки - PullRequest
Новая
       6

Как сделать обёртку контента "сверху" из CSS-сетки

0 голосов
/ 30 июня 2018

Я работаю над макетом сайта, используя CSS-сетку из двух столбцов, которая выглядит примерно так. Он отлично работает, и все контент-центры прекрасно в каждом div. Ячейки с "bg" просто имеют фоновое изображение. Каждая ячейка сетки «касается» границ окна браузера. 

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

Однако, есть ли простой способ обернуть и отцентрировать контент, чтобы он не выходил за пределы определенной ширины? Я мог бы нацелить отдельные абзацы на выравнивание влево или вправо в зависимости от их ячеек, но мне было интересно, есть ли более элегантный способ сделать это? Кронштейны являются «оберткой». 

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

Ответы [ 2 ]

0 голосов
/ 30 июня 2018

Попробуйте это: - 

.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>
0 голосов
/ 30 июня 2018

Вы можете поместить обертку вокруг всей сетки из двух столбцов и добавить некоторые отступы слева и справа от обертки.

...