个人中心
gpt4 book ai didi

html - 如何划分我的 html 页面以显示带有 float 侧面板的 map 和标题栏

转载 作者：太空宇宙 更新时间：2023-11-04 05:42:57 25 4
gpt4 key购买 nike 

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

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

enter image description here

我试过这样，

<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

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

 <header>
   <div class="logo">
     logo
   </div>
   <div class="user">
   user
   </div>
 </header>
 <div class="content-part">
 <div class="left">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d250646.68136366305!2d76.82714579604459!3d11.012014523376545!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba859af2f971cb5%3A0x2fc1c81e183ed282!2sCoimbatore%2C%20Tamil%20Nadu!5e0!3m2!1sen!2sin!4v1574418216890!5m2!1sen!2sin" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
 <a href="#" class="btn">Toggle</a>
 </div>
 <div class="sidebar">
 </div>
 </div>

</body>
</html>

CSS

*{
  box-sizing: border-box;
}
header{
  border:2px solid #000;
  padding:20px 10px;
  width:100%;
}
header:after{
  content:"";
  display:table;
  clear:both;
}
.logo{
  float:left;
}
.user{
  float:right;
}
.content-part{
  float:left;
  width:100%;
  border:2px solid red;
  min-height:500px;
  display:flex;
  position:relative;
}
.left{
  float:left;
  width:100%;
  position:relative;
}
.sidebar{
  float:right;
  width:30%;
  border:2px solid yellow;
  min-height:500px;
  position:absolute;
  top:0;
  right:0;
}
.btn{
  border:2px solid #000;
  padding:10px;
  color:#000;
  text-decoration: none;
  display:inline-block;
  margin:25px; 
  float:right;
  position:absolute;
  top:0;
  right:0;
}

关于html - 如何划分我的 html 页面以显示带有 float 侧面板的 map 和标题栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58991571/

25 4 0
文章推荐： linux - grep 和 AWK 命令读取主机名并打印列
文章推荐： Python3 - 将变量的值插入另一个变量命令
文章推荐： regex - Linux bash : sed, awk 等工具将行尾正则表达式 '$' 匹配为终端宽度
文章推荐： javascript - 如何通过@input 属性应用样式，我想增加 mat-autocomplete 的宽度
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com