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>

View on JSFiddle

Answer 1

编辑 - 我对问题的描述不完全正确，但解决方案 none 不太有效。浮点数不能很好地与 position: fixed

配合使用

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

#col-2 {
  position: fixed;
  width: 50%;
  left: 50%;
  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>

Answer 2

您的代码还包括每个 div 的固定定位，使每个都脱离页面的正常流动，从而将它们堆叠在一起。

Answer 3

#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> 标签做一些事情。

Answer 4

使用 flexbox

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

css /html 的基本分屏

Basic split screen with css /html

html

css

css-position

css-float