如何在HTML中并排安排两个分区

Question

如何垂直排列两个分区这是我的部门代码

.containerLeft {
  width: 50%;
  float: left;
}
.containerRight {
  width: 50%;
  background-color: skyblue;
}

<div class="containerLeft">
  <input type="text" id="mytext" />
  <select id="myList" multiple="multiple"/>
      </div>
      <div class="containerRight">
          <input type="button" class="myButton"  value="A"></input>
          <input type="button" class="myButton"  value="B"></input>
          <input type="button" class="myButton"  value="C"></input>
      </div>

我想让第一个Div容器在上方共享50％的屏幕和带有按钮剩余50％的第二个Div容器。两个容器应并排放置。

任何帮助将不胜感激。HTML非常新。因此，请让我知道是否不是正确的方法，可以并排两个面板。

Answer 1

如果我理解您，这将是解决方案：

.containerRight {
   float:left;
   width: 50%;
   background-color: skyblue;
}

Answer 2

正如其他人所提到的，您的HTML有许多问题。我试图相应地修复它们。

您的CSS真的很近，您需要添加的只是float: left到另一个Div。

.containerLeft {
  background-color: red;
  float: left;
  width: 50%;
}
.containerRight {
  background-color: skyblue;
  float:left;
  width: 50%;
}

在这里工作：https：//fiddle.jshell.net/a9t2ygsa/1/

Answer 3

请注意您在HTML中的更正。我认为您可能正在寻找这样的东西。

.containerLeft {
  width: 50%;
  height: 100vh;
  float: left;
}
.containerRight {
  width: 50%;
  height: 100vh;
  float: left;
  background-color: skyblue;
}

<div class="containerLeft">
  <input type="text" id="mytext" />
  <select id="myList" multiple="multiple"></select>
</div>
<div class="containerRight">
  <input type="button" class="myButton" value="A" />
  <input type="button" class="myButton" value="B" />
  <input type="button" class="myButton" value="C" />
</div>