html - 我怎么能有这样的div？

Question

我想要一个这样的欢迎页面：

但相反，我得到了这个：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: #000000;
  margin: 0;
  height: 90%;
  width: 100%;
  align-items: center;
}

#container1 {
  height: 100%;
  vertical-align: middle;
  display: table-cell;
  background-color: yellow;
  display: flex;
  align-items: center;
}

#left {
  height: 500px;
  color: white;
  background-color: blue;
  font-size: 20px;
  float: left;
  width: 100%;
}

#right {
  height: 500px;
  color: white;
  background-color: red;
  font-size: 20px;
  float: left;
  width: 100%;
}

<main id="container1" class="container my-6">
  <div class="">
    <div id="left" class="col-lg-6 my-3">
    </div>
  </div>
  <div class="">
    <div id="right" class="col-lg-6 my-3">
    </div>
  </div>
</main>

我不知道为什么我的容器不完全适合页面的主体，而我的左右不进入中间并将宽度拉伸到彼此的末端。

标签： htmlcssfrontend

Answer 1

问题主要来自div没有类的 s，不应该存在。
但是你也混合了浮点数、flex 和表格。就像在这个例子中那样坚持使用 flex ：

html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
  height: 100%;
  display: flex;
}

.left,
.right {
  width: 50%;
  height: 100%;
}

.left {
  background: #215f40;
}

.right {
  background: #092414;
}

<div class="container"> 
  <div class="left"></div>
  <div class="right"></div>
</div>