html - 如何制作CSS网格的内容包装器 "on top"

标签 html css grid css-grid

我正在使用两列 CSS 网格设计网站布局,它看起来有点像这样。它工作正常,所有内容都完美地集中在每个 div 中。带有“bg”的单元格只有一个背景图像。每个网格单元“接触”浏览器窗口的边界。

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

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

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

最佳答案

您可以在整个两列网格周围放置一个包装器,并在包装​​器的左侧和右侧添加一些填充。

关于html - 如何制作CSS网格的内容包装器 "on top",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51111243/

相关文章:

html - 不同列中第一个 div 的高度相同(bootstrap 4)

html - 需要辅助内容出现在 Bootstrap 的底部

javascript - 使用 javascript 创建 div 后无法将样式应用于我的网格

css - 更改位置网格

jquery - 如何在页面加载时隐藏 Accordion 并仅在单击元素时显示

html - 覆盖悬停链接 [CSS/HTML]

ios - 实现此设计的最佳方法 [ios]

css - 具有 rowspan 和固定宽高比的 Flexbox

html - 将 x2 图像用于 Retina 显示 CSS

javascript - JQuery:对 .append 元素的高度进行动画处理