如何使用新的 css3 属性(例如 flexbox)将 View 拆分为两列,以便带有帖子列表的左列将溢出-y 滚动到页面底部,并映射将填充其容器并永久保留在右侧的容器边?
var post = "<h3>Post title</h3><div>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</div><hr>";
var i = 0;
while (i < 10) {
$('#left_container').append(post);
i++;
}
var options = {
zoom: 10,
center: new google.maps.LatLng(49, 17),
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
.flexbox-container {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
.flexbox-container #left_container {
width: 35vw;
padding: 0 5px;
height: 100vp;
overflow-y: scroll;
}
.flexbox-container #map_container {
margin-right: 0px;
}
#map_canvas {
position: absolute;
overflow-y: hidden;
width: 65vw;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div class="flexbox-container">
<div id="left_container"></div>
<div id="map_canvas"></div>
</div>
最佳答案
试试这个 DEMO
HTML
<div class="flexbox-container">
<div id="left_container">
<div class="container-content">
</div>
</div>
<div id="map_canvas"></div>
</div>
CSS
.flexbox-container {
display: -ms-flex;
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100vh;
}
.flexbox-container #left_container {
flex: 1;
padding: 0 5px;
}
.container-content {
overflow-y: auto;
height: 100vh;
}
.flexbox-container #map_container {
margin-right: 0px;
}
#map_canvas {
flex: 2;
}
关于html - 如何使用 css3 flexbox 将帖子列表放在左侧,将谷歌地图 Canvas 放在右侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34095760/