我怎么能有这样的div？答案

【问题标题】：How can I have a div like this?我怎么能有这样的div？
【发布时间】：2021-01-02 22:48:42
【问题描述】：

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

但是我得到了这个：

* {
  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>

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

【问题讨论】：

用grid或者bootstrap试试，你会轻松搞定的
您的代码最大的问题（看起来您正在使用引导程序），您的 left 和 right div 不是 container1 的直接子代，因此它们不是弹性子代。删除包装 <div> 元素，它将起作用。此外，绝对没有理由在左右使用 float，因为这就是 flex 的用途。
@Aleksandar 他们正在使用引导程序。这是一个错字类型的问题，因为 col-lg-6 元素不是容器的直接子元素。
@disinfor 它成功了，先生！谢谢！但剩下的唯一问题.. 是我的 container1 不完全适合整个屏幕空间
@FoxcyLoxcy 我已经为你添加了答案。

标签： html css frontend

【解决方案1】：

您的代码中有很多错误。我把你不需要的 CSS 注释掉了：

不需要float，这就是 flex 的用途。
display: table-cell 被 display: flex 覆盖
使用flex 设置left 和right div 的属性。
删除这些元素周围的包含元素。

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

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

#container1 {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  /* NOT NEEDED: display: table-cell; */
  background-color: yellow;
  display: flex;
  /* This is probably unneeded. align-items, aligns elements on the cross access - which in this case would be vertically aligned in the center since flex-direction by default, is row */
  align-items: center;
}

#left {
  height: 500px;
  color: white;
  background-color: blue;
  font-size: 20px;
  /* NOT NEEDED float: left; */
  /* NOT NEEDED width: 100%; */
  flex: 1 1 50%;
}

#right {
  height: 500px;
  color: white;
  background-color: red;
  font-size: 20px;
  flex: 1 1 50%;
  /* NOT NEEDED float: left; */
  /* NOT NEEDED width: 100%; */
}

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

【讨论】：

【解决方案2】：

问题主要来自没有类的divs，不应该存在。
但是你也混合了浮动，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>

【讨论】：