带有弹性框的CSS地图和侧边栏布局

时间：2017-11-08 17:15:24

标签： html css css3 flexbox

＆＃13;
＆＃13; 
let mymap = L.map('map').setView([54.5, -2], 6);

			L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
				attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
				id: 'mapbox.streets',
				accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
			}).addTo(mymap);
＆＃13; 
*{
    padding: 0;
    margin: 0;
}

html, body{
    height: 100%;
}

.map-container{
  display: flex; 
}

/*#map {*/
/*    //height: 100%;*/
/*    //width: 100%;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*}*/

.map{
  border: 1px solid green;
}

.info-block{
    background: white;
    width: 400px;
}


.info-block__inner{
    overflow: scroll;
    height: 100%;
}

.content_container{
    padding: 0 20px 20px 20px;
}

.content{
    margin-top: 30px;
}
＆＃13; 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />

  <div class='map-container'>
    
    <div id="map" class="map flex-element"></div>

    <div class="info-block flex-element">
      <div class="info-block__inner">
        <div class="content_container">
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
        </div>
      </div>
    </div>
  
  </div>

  <!-- Make sure you put this AFTER Leaflet's CSS -->
  <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
＆＃13;
＆＃13;
＆＃13;

我这里有一个傻瓜 - https://plnkr.co/edit/RnJBeUaXcQtOneIn4jwM?p=preview

我尝试创建这样的布局 - https://plnkr.co/edit/PvszkAJCwFK9FhftEwTA?p=preview

我需要将整页拆分为两列，其中一列是固定的，另一列是页面的其余部分，包含地图。

是否可以使用弹性框进行此操作。

.map-container{
  display: flex; 
}

2 个答案:

答案 0 :(得分：1)

你可以这样做：

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

.parent {
  display: flex; /* displays children inline */
}

.parent > .fixed {
  width: 400px; /* adjust to your needs */
  height: 200px; /* for presentation */
  background: Teal;
}

.parent > .map {
  flex: 1; /* takes all the remaining space */
  height: 200px; /* for presentation */
  background: Aqua;
}

@media screen and (max-width: 568px) { /* adjust to your needs */
  .parent {
    flex-direction: column; /* stacks children vertically */
  }
  .parent > .fixed {
    width: 100%; /* makes it responsive */
  }
}
<div class="parent">
  <div class="fixed">CONTENT</div>
  <div class="map">MAP</div>
</div>

答案 1 :(得分：1)

您可以通过以下步骤完成此操作：

  • 给map-container一个高度，height: 100%;

  • 将flex-grow: 1添加到map，并将剩余可用空间（并order: 1将其移至右侧）

  • 将overflow: scroll移至info-block（我将其更改为auto并删除info-block__inner，因为它似乎仅用于滚动）

您可以在order: 1之后移动标记，而不是将map添加到info-block。

Updated plnkr

Stack snippet

＆＃13;
＆＃13; 
let mymap = L.map('map').setView([54.5, -2], 6);

			L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
				attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
				id: 'mapbox.streets',
				accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
			}).addTo(mymap);
＆＃13; 
*{
    padding: 0;
    margin: 0;
}

html, body{
    height: 100%;
}

.map-container{
  display: flex;
  height: 100%;
}

.map{
  border: 1px solid green;
  flex-grow: 1;
  order: 1;
}

.info-block{
    background: white;
    width: 400px;
    overflow: auto;
}

.content_container{
    padding: 0 20px 20px 20px;
}

.content{
    margin-top: 30px;
}
＆＃13; 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />

  <div class='map-container'>
    
    <div id="map" class="map flex-element"></div>

    <div class="info-block flex-element">
        <div class="content_container">
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
          </div>
        </div>
    </div>
  
  </div>

  <!-- Make sure you put this AFTER Leaflet's CSS -->
  <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题