Html 如何并排设置两个div_Html_Css

Html 如何并排设置两个div

html css

Html 如何并排设置两个div,html,css,Html,Css,我试图用HTML/CSS实现这一点： +---------------------------------------------------------------------+ | HEADER DIV | +------------+--------------------------------------------------------+ | |

我试图用HTML/CSS实现这一点：

+---------------------------------------------------------------------+
| HEADER DIV                                                          |
+------------+--------------------------------------------------------+
|            |                                                        |
|            |                                                        |
|            |                                                        |
|            |                                                        |
|            |                                                        |
|    nav DIV |   scrollable DIV                                       |
|            |                                                        |
|            |                                                        |
|            |                                                        |
|            |                                                        |
|            |                                                        |
|            |                                                        |
+---------------------------------------------------------------------+
| FOOTER DIV                                                          |
+---------------------------------------------------------------------+

页眉和页脚div是浏览器窗口的宽度
页眉和页脚以及固定高度（以像素为单位）
页眉和页脚，并固定在浏览器的顶部和底部 window nav div是浏览器窗口的高度减去（页眉高度+ 页脚高度）
可滚动内容在内部滚动，不影响页脚或页眉的绝对位置

我只能到达导航DIV+和可滚动DIV一起滚动的点。当可滚动的div滚动时，我不能使NAV div不滚动

我想关键是我如何将两个div并排放置，而当另一个滚动时却不滚动其中一个

nav
{
 margin-left:0px;
 width:100px;
}

scrollable
{
 margin-left:100px;
}

或

.container
{
宽度：800px；
}
.导航{
宽度：300px；
浮动：左；
}
.可滚动{
宽度：500px；
浮动：对；
}
HTML文件
左内容
正确内容

试试这个，我希望它能帮助你


<style> 
* { margin: 0; padding: 0; }
.container { position: fixed; height: 100%; width: 1000px; } 
.header { height: 10%; width: 100%; } 
.wrapper { width: 100%; height: 80%; } 
.wrapper .nav { width: 20%; display: inline-block; vertical-align: top; } 
.wrapper .scrollable { width: 80%; margin-left:-4px; display: inline-block; vertical-align: top; overflow-y: scroll; } 
.footer { height: 10px; width: 100%; } 
</style>

<body> 
  <div class="container">    
       <div class="header"></div>    
       <div class="wrapper">
          <div class="nav">
          </div>
          <div class="scrollable">
          </div>    
       </div>    
       <div class="footer"></div> 
      </div> 
</body>

*{边距：0；填充：0；}
.容器{位置：固定；高度：100%；宽度：1000px；}
.标题{高度：10%；宽度：100%；}
.wrapper{宽度：100%；高度：80%；}
.wrapper.nav{宽度：20%；显示：内联块；垂直对齐：顶部；}
.wrapper.scrollable{width:80%；左边距：-4px；显示：内联块；垂直对齐：top；overflow-y:scroll；}
.footer{高度：10px；宽度：100%；}

我不明白为什么

宽度：1000px.container

中编码>。为什么这样做？（仅供参考，这个答案对我很有帮助。）
<style> 
* { margin: 0; padding: 0; }
.container { position: fixed; height: 100%; width: 1000px; } 
.header { height: 10%; width: 100%; } 
.wrapper { width: 100%; height: 80%; } 
.wrapper .nav { width: 20%; display: inline-block; vertical-align: top; } 
.wrapper .scrollable { width: 80%; margin-left:-4px; display: inline-block; vertical-align: top; overflow-y: scroll; } 
.footer { height: 10px; width: 100%; } 
</style>

<body> 
  <div class="container">    
       <div class="header"></div>    
       <div class="wrapper">
          <div class="nav">
          </div>
          <div class="scrollable">
          </div>    
       </div>    
       <div class="footer"></div> 
      </div> 
</body>