Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我想让上面的第一个div容器分享50％的屏幕，第二个div容器与按钮共享剩余的50％。两个容器应该并排放置。

感谢任何帮助。 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>

如何在HTML

3 个答案: