安排 2 Div 的并行

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 内结束。

待办事项：

想把div的并排排列在一起。

已更新 FIDDLE : https://jsfiddle.net/genackwp/

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

谢谢

Answer 1

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

试试加"position:fixed;"，看看能不能用

Answer 2

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

Similar Helpful Stack Overflow Question
只需给您的第一个 div 一个 class 说明符来识别，并给它一个 float:left 或只是以 div 的内联样式提供它。
只提供float:left给第一个-div

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>

安排 2 Div 的并行

Arranging 2 Div's Parallel

html

css

css-position

bootstrap-4