<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 应用程序，看起来与下图完全一样，
我试过这样，
<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/