Question

我盯着屏幕看了太长时间而看不到它，或者我无法说出我在做什么错。

这应该很简单，但是id="parkEntrances"标题DIV已定位在其上方的id="featureDisplay"中。因此，随着“便利设施”的列出，“入口”标题栏出现在图像图标的后面。但是，当我在Chrome Inspector中查看呈现的代码时，它在ENTRANCES DIV标签之外显示了featureDisplay标题栏。

在Chrome Inspector中，当我将鼠标悬停在id="featureDisplay"代码上时，可视屏幕上显示div标题标签为：div#featureDisplay 324px x 0px-因此，我认为这是导致问题的原因。为什么它的0px高度令我感到困惑，因为列出的所有功能图标都显示为50px高度...它列出了两行图标，所以featureDisplay的高度应默认为100px ...并且当我手动将div高度更改为110px，所有内容均按其预期的方式排列。但这对于格式相同的其他部分则不是必需的。

就像'featureDisplay不知道其自身内容一样。

几乎相同的代码，但是我不明白为什么“入口”会一直嵌套在“便利设施”部分中。 ....其他章节“ INSTRUCTIONS”和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>

DIV视觉上嵌套在先前的DIV中

0 个答案: