HTML 中的两个窗格 window

Question

我想HTML使用水平线垂直分割屏幕。

<hr width="2" size="1080" color="green">

从那里我有两件事我不知道该怎么做但想做。

1：让 html 将每一侧视为一个单独的区域，以便我可以使用此 css:

将左侧居中

<style type="text/css">

html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; }

#td_wrap { vertical-align: middle; text-align: center; } </style>

和这个 html:

`<table id="tbl_wrap">
<tbody>
<tr>
<td id="td_wrap">
<!-- START: Anything between these wrapper comment lines will be centered-->
<div style="border: 1px solid white; display: inline-block;">
</div>
<!-- END: Anything between these wrapper comment lines will be centered -->
</td>
</tr>
</tbody>
</table>`

2：让我用水平线创建的线随页面滚动或随页面长度增长。

任何帮助或参考 material 将不胜感激。谢谢。

Answer 1

<div style="float:left;border: 0px solid; width: 49%;overflow-y:scroll;text-align: center">
panel 1
</div>
<div style="float: left; height: 100%"><hr width="2" style="height: 100%" color="green"></div>
<div style="float:right; border: 0px solid; width: 49%;overflow-y:scroll;text-align: center">
panel 2
</div>

HTML 中的两个窗格 window

Two panes one window in HTML

html

centering