Question

我需要帮助。我想用html，css代码制作一个web pabe。所以我开始了，现在我遇到了一些问题。我想将我的页面分成3个不同的页面，如下所示：

我希望你理解我的意思。我想这样做，因为当我在一个页面上设置一个表在CSS表格下面（或称为Metro），所以我发现我可以将页面分开并按顺序排列所有内容。

感谢您的帮助！我很年轻，所以我正在学习。：d

Answer 1

我会根据您的说法尝试提供帮助，但我需要告诉您，如果您包含已完成的工作以及如何（通过代码），您可以更轻松地给出一个确切的答案）。截图确实让我知道你在寻找什么，所以这是我的想法。

我要做的是：

将整个页面包装在容器div中，以便您可以控制页面中项目的显示，使其与实际页面的主体分开。
将方框A和方框B和C分成两个单独的div（行）
将容器div指定为flexbox，允许您将行的流和其他属性控制为flex项。默认情况下，flex-direction属性设置为row，因此我需要稍后更改它以获得所需的布局。
将容器的flex方向指定为列。
将第二行指定为弹性工具箱，并使用内部两个方框的宽度进行播放，直至获得您喜欢的比例。

这是HTML

<html>
  <body>
    <div class="container">
      <div class="row-1">
        <div class="box-a">Box A</div>
      </div>
      <div class="row-2">
        <div class="box-b">Box B</div>
        <div class="box-c">Box C</div>
      </div>
    </div>
  </body>
</html>

这是CSS：

/*Positioning*/

.container {
  display: flex;
  flex-direction: column;
}

.row-2 {
  display: flex;
}


.box-a {
  background-color: red;
  height: 350px;
}

.box-b {
  background-color: blue;
  height: 350px;
  width: 30%;
}

.box-c {
  background-color: lightgreen;
  width: 70%;
  height: 350px;
}

这是笔中的所有代码。 http://codepen.io/zharriott/pen/yMpZge

希望这有帮助！如果您有任何问题，请告诉我。

我想将我的页面分成3行

1 个答案: