DIV визуально вкладывается в предыдущий DIV - PullRequest
Новая
       11

DIV визуально вкладывается в предыдущий DIV

0 голосов
/ 10 сентября 2018

Либо я слишком долго смотрю на экран и просто не вижу его, либо не могу понять, что я делаю неправильно.

Это должно быть довольно просто, но DIV заголовка id="parkEntrances" позиционируется в id="featureDisplay" над ним.Таким образом, в списке «Удобства» отображается строка заголовка «Входы» за значками изображений.Но когда я смотрю на визуализированный код в Chrome Inspector, он показывает строку заголовка ENTRANCES вне тегов featureDisplay DIV.

В Chrome Inspector при наведении курсора мыши на код id="featureDisplay"визуальный экран показывает тег заголовка div: div#featureDisplay 324px x 0px - так что я думаю, что это усугубляет проблему.Почему его высота 0px сбивает меня с толку, потому что все значки функций, которые перечислены в списке, отображаются и имеют высоту 50px ... в нем перечислены две строки значков, поэтому высота featureDisplay должна быть по умолчанию равна 100px ... и когда я изменяю вручнуювысота div до 110px, все выстраивается так, как должно.но это не требуется для других разделов с одинаковым форматированием.

Это похоже на то, что `featureDisplay не знает своего собственного содержимого.

Это почти тот же код, но я могу"Выяснить, почему входы продолжают вкладываться в раздел «Удобства»..... Остальные разделы "ИНСТРУКЦИИ" и PHOTOS расположены очень хорошо. 

<div id="fullScreen">
  <div class="customBar" >GENERAL INFO</div>
  <div style="margin-left:10px;font-weight:bolder;font-size:14px;">Location: {{park.address}},{{park.city}}
    <br>Price: {{park.currency}}{{park.price}}
    <br>Name: {{park.location_name}}
  </div>

  <div id="parkFeatures" class="customBar" ng-if="park.features.length == 0">AMENITIES: None Listed</div>
  <div id="parkFeatures" class="customBar" ng-if="park.features.length > 0">AMENITIES</div>
    <div id="featureDisplay" ng-if="park.features.length > 0" style="display:block;width:90%;margin-left:5%;margin-right:5%;">
      <div id="feature_{{feature.key}}" ng-repeat="feature in park.features" style="text-align:center;width:20%;float:left;"> 
        <img ng-src="{{getIcon(feature.key)}}" style="height:50px;" on-hold="hoverName('{{feature.name}}',1)" on-release="hoverName('',0)" />
      </div>
    </div>

  <div id="parkEntrances" class="customBar" ng-if="park.entrances.length == 0">ENTRANCES: None Listed</div>
  <div id="parkEntrances" class="customBar" ng-if="park.entrances.length > 0">ENTRANCES</div>
    <div id="entranceDisplay" ng-if="park.entrances.length > 0" style="display:block;width:90%;margin-left:5%;margin-right:5%;">
      <div id="moreEntrances" ng-repeat="entrance in park.entrances" style="">
        Lat: {{entrance.coordinates[0]}}, Lon: {{entrance.coordinates[1]}}
      </div>
    </div>

  <div id="parkInstructions"  class="customBar" ng-if="park.instructions.length == 0">INSTRUCTIONS: None Listed</div>
  <div id="parkInstructions" class="customBar" ng-if="park.instructions > 0">INSTRUCTIONS</div>
    <div id="instructionsDisplay" ng-if="park.instructions > 0" style="display:block;width:90%;margin-left:5%;margin-right:5%;">
      <div id="moreInstructions" ng-repeat="instruction in park.instructions" style="">
        {{instruction.instructions}}
      </div>      
    </div>

  <div id="parkPhotos" class="customBar" ng-if="park.photos.length == 0">IMAGES: None Listed</div>
  <div id="parkPhotos" class="customBar" ng-if="park.photos.length > 0">IMAGES: None Listed</div>
    <div id="photosDisplay" ng-if="park.photos.length > 0" style="display:block;width:90%;margin-left:5%;margin-right:5%;">
      <div id="morePhotos" ng-repeat="photo in park.photos" >
        <img ng-src="{{photo.url}}" />
      </div>      
  </div>

</div>
...