Question

如何将左栏作为导航栏，右列作为正文？

<style>
    #leftBodyVideo{
width: 45%;
display: inline-block;
}

#rightBodyVideo{
width: 45%;
display: inline-block;
}
</style>

<div id="leftBodyVideo">
    <h5>Pyraminx ao12 16 46</h5>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>

</div>

<div id="rightBodyVideo">
    <h5>Lubing DaYan ZhanChi Cube</h5>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" allowfullscreen></iframe>

</div>

预期结果是这样的（对于文档模板）：https://nodejs.org/docs/latest-v5.x/api/

Answer 1

添加iframe width 100%

iframe{width:100%; max-width:560px;}

https://jsfiddle.net/kd1v21ad/1/

Answer 2

您可以定位div并使用overflow-y: scroll;。

FIDDLE

以下是代码：

＆＃13;

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 500px;
  width: 200px;
}

＆＃13;

<div>
  1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/>

</div>

＆＃13;

如何将左列作为导航器，将右列作为主体？

2 个答案: