Question

我有一个棘手的布局，我正试图实现。首先，左栏很重要。

在下面的代码示例中，内容与左侧对齐。如何让内容区域与右侧对齐，但仍然保持其高度，以便白色区域最终位于绿色区域下方？如果你能摆脱包装的话可以获得奖金！

我试过右对齐，浮点数：右边和位置：绝对，第一个没有效果，另外两个高度为0

我们不能假设内容的任何高度，宽度是最大宽度和总页数的百分比。

以下是我的完整标记：

body {
  width: 61.8047%;
}
 
html {
  height: 100%;
}
body {
  min-height: 100%;
}
.question__wrapper {
  background: #009B58;
}
.question {
  max-width: 742px;
  padding-bottom: 48px;
  padding-top: 24px;
}
.answer {
  max-width: 742px;
  padding-bottom: 48px;
}
.context {
  max-width: 742px;
  background: #4A4A4A;
  width: 38.1953%;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
}

<!doctype html>
<html lang="se">

<head>
</head>

<body>
  <div class="question__wrapper">
    <div class="question">
      content
    </div>
  </div>

    <div class="answer__wrapper">
      <div class="answer">
        <h2 class="answer__header">Svar</h2>
        <div class="answer__text">
          content
        </div>
      </div>
    </div>

    <aside class="context">
      <div class="context__cta">
        <h2>Logo</h2>
      </div>
    </aside>
    <script src="javascripts/application.min.js"></script>
</body>

</html>
This will make more sense in full screen-mode!

如何在保持默认高度行为的同时将项目对齐？

0 个答案: