如何分割我的html页面以显示带有浮动侧面板的地图和标题栏

Question

<html>
<head>
</head>
<body>

 <div class="container">
 <header style="text-align:center;background-color:red;height:60px;position:relative"> map application
  <div style="display:flex">
  Log
  </div>
  <div style="display:flex">
  userbox
  </div>
 </header>

 <div id="mapdiv" style="background-color:green;height:auto;width:100%">

 this is the area i have intended to show complete map 
 </div>

 <div id="righsidepanel" style="background-color:blue;float:right;width:300px;height:auto">
 right side panel , this is the area in which , i have inteneded to show properties when you click on the map
 </div>
 </div>

</body>
</html>

我已请求创建一个地图应用程序，使其看起来与下图完全一样，

我已经尝试过这样，

<html>
<head>
</head>
<body>

 <div class="container">
 <header style="text-align:center;background-color:red;height:60px;position:relative"> map application
  <div style="display:flex">
  Log
  </div>
  <div style="display:flex">
  userbox
  </div>
 </header>

 <div id="mapdiv" style="background-color:green;height:auto;width:100%">

 this is the area i have intended to show complete map 
 </div>

 <div id="righsidepanel" style="background-color:blue;float:right;width:300px;height:auto">
 right side panel , this is the area in which , i have inteneded to show properties when you click on the map
 </div>
 </div>

</body>
</html>

但是很遗憾，我无法做到。.>

Answer 1

0
投票

尝试这样..这种创建网页的方式

如何分割我的html页面以显示带有浮动侧面板的地图和标题栏

问题描述投票：0回答：1

1个回答

最新问题

如何分割我的html页面以显示带有浮动侧面板的地图和标题栏

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1