带有 css /html 的基本分屏

Question

我正在尝试创建两个单独的 div，一个覆盖屏幕的左半部分，一个覆盖屏幕的右侧。为什么我的代码只创建了一个 div 覆盖页面的左半部分，当我包含float:left和 时float:right？我该如何解决？

#col-1 {
  position: fixed;
  width: 50%;
  float: left;
  height: 100%;
  background-color: #282828;
  z-index: 1010101010
}

#col-2 {
  position: fixed;
  width: 50%;
  float: right;
  height: 100%;
  background-color: #0080ff;
  z-index: 1010101010
}

<div id="col-1">
  <h1>This is half of a page</h1>
</div>
<div id="col-2">
  <h1>This is another half of a page</h1>
</div>

在 JSFiddle 上查看

Answer 1

使用弹性盒

.container {
  display: flex;
}

#col-1 {
  background-color: yellow;
  flex: 1;
}

#col-2 {
  background-color: orange;
  flex: 1;
}

<section class="container">
<div id="col-1">
  <h1>This is half of a page</h1>
</div>
<div id="col-2">
  <h1>This is another half of a page</h1>
</div>
</section>

Answer 2

#col-1 {
  position: relative;
  width: 50%;
  float: left;
  height: 100%;
  background-color: #282828;
  z-index: 1010101010
}

#col-2 {
  position: relative;
  width: 50%;
  float: left;
  height: 100%;
  background-color: #0080ff;
  z-index: 1010101010
}

<div id="col-1">
  <h1>This is half of a page</h1>
</div>
<div id="col-2">
  <h1>This is another half of a page</h1>
</div>

这对我有用。我换position: fixed到relative。此外，它们都应该是 float:left。如果你这样做float:right，右边的会分散，他们应该都离开。

另外，只是我的一个建议，我喜欢在我的页面上做 - 如果使用得当，我是表格的忠实粉丝。表格倾向于将事物放在一起，具有相同的测量和对齐方式。它为您做了很多造型工作。尝试做的东西<table>，<tbody>和<thead>标签。