需要复杂的布局

Question

我需要一个页面布局，它有2个容器，第一个是对齐中心，第二个容器应该是从右侧的全宽，并从左边与第一个容器对齐。为了更好地理解我上传了一个示例图像。这个布局应该是响应式的。第二个容器应在每个分辨率上从左到上对齐。

Answer 1

不应该太难。可能存在基于标题/导航或标记中包含的其他包装类型div的复杂情况，但此片段提供了一般概念。

尝试调整大小，应该做出回应。

＆＃13;

＆＃13;

div {
  background-color: lightblue;
  margin-top: 20px;
  margin-bottom: 20px;
  min-height: 80px;
}

.full-center {
  margin-left: 10%;
  margin-right: 10%;
}

.full-right {
  margin-left: 10%;
}

＆＃13;

<div class="full-center"></div>
<div class="full-right"></div>

＆＃13;

＆＃13;

＆＃13;