【发布时间】：2017-08-22 10:27:12
【问题描述】：
我有一个需要开发的 HTML 布局，但我想不出任何好的方法...
如何制作这种布局？
它基本上是一个正常的响应式居中列布局，其中列是带有一些填充的最大宽度 - 我对那部分没有问题。但是，我遇到的问题是还有一个右对齐的列，但是它的左边缘与居中列的左边缘对齐。
如果不使用 JavaScript 来计算宽度等，我如何使用 CSS 实现这一点？
（是的，这必须在最新的 2 个版本的浏览器中工作，所以 css 网格布局等可能不会有用）
像这样：
有人要求提供代码，所以这里有一些伪代码，但是我要求使用 HTML 和 CSS 来实现这一点，所以这个（非常基本的）代码可能不是正确的方法。不过，这是一个非常基本的列布局，带有（非工作）右对齐列。
我也许还应该补充一点，我对 HTML 和 CSS 有很好的理解，但想不出一种方法来进行这种布局。不幸的是，“使用引导程序”可能不是一个有用的答案，除非你能展示它是如何具体做到这一点的（然后我会复制样式并自己做）
<style>
.centre-aligned-column {
max-width: 960px;
padding: 0 30px;
margin: auto;
}
.right-aligned-column {
/* how? */
}
</style>
<section>
<div class="right-aligned-column">
RIGHT ALIGNED COLUMN CONTENT
</div>
</section>
<section>
<div class="centre-aligned-column">
CENTRE ALIGNED COLUMN CONTENT
</div>
</section>
【问题讨论】：
-
您的标签：
grid-layout已经回答了您的问题。有很多方法 - 但这取决于您的应用程序/网站是否首先布局“小屏幕”以及许多其他内容。 youtube.com/watch?v=7kVeCqQCxlk（ps：它不会“改变一切”，只是改变了一小部分） -
如果您需要帮助，您将不得不实际编写一些代码。 :)
-
@sheriffderek 据我了解，在这种情况下，网格布局对于生产使用的支持不够好，但我会考虑是否可以使用它。不幸的是，由于缺乏浏览器支持，我没有太多经验。我看不出编写任何代码如何帮助您回答问题，但我现在已经放了一些代码。
-
不幸的是，我无法在 css 网格布局中找到任何可以让我制作两个部分的内容，一个带有响应列，另一个从与左侧响应列相同的点开始，但继续到页面的右侧。看起来网格布局主要只对单个网格有用，而不是对多个部分（将具有不同的背景样式等）。我错过了什么吗？
-
观看视频老兄...多试几次。你真的在打电话。“我看不出编写任何代码如何帮助你回答......”stackoverflow.com/help/how-to-ask
标签： html css layout grid-layout