带有 css /html 的基本分屏

Question

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

 #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 上查看

原文由 the_darkside 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

 #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> 标签。

原文由 Tanner Babcock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用弹性盒

 .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>

原文由 Aldrin 发布，翻译遵循 CC BY-SA 4.0 许可协议