Javascript 如何将html页面一分为二？
基本上我希望这两张地图在同一条线上，一张在右边，另一张在左边，但我得到一张在顶部，另一张在底部。 我认为这可能是可以实现的CSS定位，但我仍然是一个初学者在CSS，我划分了两个地图，以便它更明显的你们Javascript 如何将html页面一分为二？,javascript,html,css,google-maps-api-2,Javascript,Html,Css,Google Maps Api 2,基本上我希望这两张地图在同一条线上，一张在右边，另一张在左边，但我得到一张在顶部，另一张在底部。 我认为这可能是可以实现的CSS定位，但我仍然是一个初学者在CSS，我划分了两个地图，以便它更明显的你们 业务层 #地图{ 高度：400px； 宽度：400px； } 函数initMap（）{ var map=new google.maps.map（document.getElementById（'map'）{ 缩放：12， 中心：{lat:31.650456，lng:-8.016392} });
业务层
#地图{
高度：400px；
宽度：400px；
}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：{lat:31.650456，lng:-8.016392}
});
var trafficLayer=new google.maps.trafficLayer（）；
trafficLayer.setMap（地图）；
}
.柔性容器{
显示：-webkit flex；
显示器：flex；
宽度：1100px；
高度：550px；
背景颜色：浅灰色；
}
.弹性项目{
背景色：白色；
利润率：10px；
}
.项目1{
-webkit-flex:7；
弹性：7；
}
.项目2{
-webkit-flex:7；
弹性：7；
}
.项目3{
-webkit-flex:1；
弹性：1；
}
弹性项目1
弹性项目2
试试CSS，并将其应用到代码中。使用外部主体是没有意义的。您可以添加宽度：50%；浮动：左；要使其为半页，请尝试在此处添加宽度：50%；浮动：左？？
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container{
display: -webkit-flex;
display: flex;
width: 1100px;
height: 550px;
background-color: lightgrey;
}
.flex-item {
background-color: white;
margin: 10px;
}
.item1 {
-webkit-flex: 7;
flex: 7;
}
.item2 {
-webkit-flex: 7;
flex: 7;
}
.item3 {
-webkit-flex: 1;
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
</div>
</body>
</html>