如何使用CSS3 Flexbox将文章列表放在左侧，将Google地图画布放在右侧列？

Question

如何使用CSS3 Flexbox将文章列表放在左侧，将Google地图画布放在右侧列？

3

如何使用新的CSS3属性(如flexbox)，将页面分成两列，左侧是帖子列表，由于滚动导致内容溢出，可以滚动到页面底部；右侧是地图容器，它将填充其容器并始终保持在右侧。请参考以下示例代码：

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&amp;sensor=false"></script>

<div class="flexbox-container">
  <div id="left_container"></div>
  <div id="map_canvas"></div>
</div>

- luzny

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nenad Vracar · Accepted Answer

Try this 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;
}