1

我有一个页面，左半部分是带有缩略图的仪表板，右半部分是地图。我的问题是，随着我获得更多条目，仪表板会增加并且整个页面滚动，而不仅仅是仪表板。我希望它像 Airbnb 预订页面一样工作，并排滚动。我曾尝试在 css 中使用溢出，但不知何故仍然无法正常工作。

这是显示地图和仪表板这两个方面的组件的 html。

<div class="container-fluid">
  <div class="row">
    <app-artwork-dashboard class="col-lg-5 mt-3 scroll" #list (add)="input.startAddingArtwork()" (edit)="input.startEditingArtwork($event)">    </app-artwork-dashboard>
    <app-open-street-map class="col-lg-7 map-shadow"></app-open-street-map>
  </div>
</div>

这里是CSS：

.scroll {
  overflow-x: scroll;
  overflow-y: scroll;
}

在仪表板上，我有一个滚动类，从技术上讲，它应该使页面的那一侧可以滚动，至少我是这么认为的！

4

1 回答 1

2

在你的情况下试试这个：

.container{max-width:50%;  width:50%; float:left; height:100vh; overflow-x: scroll;overflow-y: scroll; overflow:scroll;}

<div class="container"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="container"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.

或者您可以使用 flex 包装 div 以将它们并排设置并设置样式框，如下所示：

.wrap{display:flex;}
.box{
height: 100vh;
    width: 50vw;
    overflow: scroll;
}

<div class="wrap">
  <div class="box">

  </div>
  <div class="box">

  </div>
</div>

内联块的另一种解决方案：

.box{
  display:inline-block;
  height: 100vh;
   width: 49%;
    overflow: scroll;
}

<div class="box">
</div>
<div class="box">
</div>
于 2019-01-25T10:21:02.887 回答