安排2 Div's Parallel

Question

问题：

• https://ibb.co/dkof1U
• https://ibb.co/d5Vw89（固定）
• 第二个div总是在第一个div内结束。

代码：

<div style="overflow-y:scroll; width: 50%; height: 100vh; background-color: #ACDBC9;"> .... </div> <div style="overflow-y:scroll; width: 50%; height: 100vh; background-color: #ACDBC9;"> .... </div>

已尝试的情况：

• 尝试将第一个div和第二个div浮动，但是，第二个div始终在第一个div内结束。

Todo：

• 想要将div并排放置。

更新后的内容：https://jsfiddle.net/genackwp/

• 要查看我看到的内容，请改为查看（“固定”）图像。

谢谢

Answer 1

<div style="overflow-y:scroll; width: 50%; height: 100vh; background-color: #ACDBC9; float:left; position:fixed;"> .... </div>
<div style="overflow-y:scroll; width: 50%; height: 100vh; background-color: #ACDBC9; float:left; position:fixed;"> .... </div>

https://jsfiddle.net/Sampath_Madhuranga/xpvt214o/605285/

将position:fixed;添加到您的代码中。

尝试一下。。现在工作正常。

Answer 2

Similar Helpful Stack Overflow Question
只需给您的第一个div一个类标识符即可，然后给它一个float:left或以该div的内联样式提供即可。
仅向一等距提供float:left

div:first-child {
  float: left;
}

<div style=" overflow-y:scroll;width: calc(50% - 10px); height: 100vh; background-color: #ACDBC9;"> .... </div>
<div style="overflow-y:scroll; width: calc(50% - 10px);padding-left:10px; height: 100vh; background-color: #ACDBC9;"> .... </div>

内联样式：float: left

<div style="float: left; overflow-y:scroll;width: calc(50% - 10px); height: 100vh; background-color: #ACDBC9;"> .... </div>
<div style="overflow-y:scroll; width: calc(50% - 10px);padding-left:10px; height: 100vh; background-color: #ACDBC9;"> .... </div>

Answer 3

<div style="overflow-y:scroll;position:fixed; width: 50%; height: 100vh; background-color: #ACDBC9;"><div>

尝试添加“ position：fixed;”，看看是否可以工作