Блог

Я использую этот пример из mapbox.

Я хочу создать что-то похожее на списки боковой панели, которые можно увидеть на Airbnb и Zillow
: пример

Я смог применить столбцы к самой боковой панели, но не сетку к отдельным спискам. Смотрите здесь: N до
после

Я также пробовал изменения в html, css, js. Безуспешно. Кто-нибудь знает, как это сделать?

   <div id="map"></div>

<div class="map-overlay">
  <div class="listing-box">
  <div id="feature-listing" class="listing"></div>
    </div> 
</div>



#map {
  position: absolute;
  left: 50%;
  width: 50%;
  top: 0;
  bottom: 0;
  }
  .map-overlay {
  position: absolute;
  width: 50%;
  top: 0;
  bottom: 0;
  left: 0;
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  background-color: #fff;
  max-height: 100%;
  overflow: auto;
  }

  .map-overlay input {
  display: block;
  border: none;
  width: 100%;
  border-radius: 3px;
  padding: 10px;
  margin: 0px;
  box-sizing: border-box;
  }

  .map-overlay .listing-box {
  display: block;
  margin: 10px;
  }
  
  .map-overlay .listing {
  postiton: absolute;
  display: inline-block;
  width: 100%;
  padding-bottom: 0px;
  -webkit-column-count: 2;  /* Chrome/Opera, Safari */
  -moz-column-count: 2; /* Mozilla Firefox */
  column-count: 2;
  -webkit-column-gap: 10px; /* Chrome/Opera, Safari */
  -moz-column-gap: 10px; /* Mozilla Firefox */
  column-gap: 10px;
  -webkit-column-rule: 1px single grey; /* Chrome/Opera, Safari */
  -moz-column-rule: 1px single grey; /* Mozilla Firefox */
  column-rule: 1px single grey;
  }

  .map-overlay .listing > * {
  display: block;
  height: 150px;
  padding: 5px 10px;
  margin-bottom: 10px;
 
    
  }

  .map-overlay .listing a {
  display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #404;
  text-decoration: none;
  background: red;
  
    
  }

  .map-overlay .listing a:last-child {
  border: none;
  }

  .map-overlay .listing a:hover {
  background: #f0f0f0;
  }



 listingEl.innerHTML = "";
    if (features.length) {
      features.forEach(function(feature) {
        var prop = feature.properties;
        var item = document.createElement("a");
        item.href = prop.wikipedia;
        item.target = "_blank";
        item.textContent = prop.name   " ("   prop.abbrev   ")";
        item.addEventListener("mouseover", function() {
  

Весь проект можно найти здесь.

Похоже, ваша проблема связана только с CSS, и вам нужно удалить определенные стили, чтобы получить представление о списке, приведенном на https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view /

1. Удалите .map-overlay .listing { CSS, поскольку он разделяет вашу сетку на количество столбцов: 2;

 .map-overlay .listing a {
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        color: #404;
        text-decoration: none;
        /* background: red; */ //<---remove
}

.map-overlay .listing > * {
        display: block;
        /* height: 150px; */  //<---remove
        padding: 5px 10px;
        /* margin-bottom: 10px; */   //<---remove
}

  

Скриншот:

Удачи!