span内没有显示跨度

问题描述 投票:0回答:1

使用chrome开发人员,为什么iframe之后的跨度不出现在div标签内?

.gl-bot2-flex {
    display: flex;
    justify-content: space-between;
}

.gl-bot2-left, .gl-bot2-right{
   width:47%;
   }
<div class="gl-bot2-flex">
   <div class="gl-bot2-left">
      <iframe src="https://www.google.com/maps/d/embed?mid=1EhOE6w1_iHeWWpE_Y52YQjVKf3jxXOV6" width="100%" height="100%"><br />
      </iframe>
      <span class="gl-pin">click on pin to see further details of gas leak</span>
   </div>
   <div class="gl-bot2-right">
      <ul>
         <li>The Audit confirmed 292 unrepaired gas leaks in Weston: 66% more than reported by National Grid 12/31/18. 35% of Weston’s leaks are large volume leaks.</li>
         <li>Using the industry standard “leak extent” method, 102 of the leaks measured 2,000 ft2 or more. These large volume leaks are deemed of “Significant Environmental Impact” (G3SEI) according to the latest ruling by the Department of Public Utilities.</li>
         <li>The largest leak in Weston was first recorded by National Grid<br>
in April 1999 and measures 14,400 ft2 – larger than 5 tennis courts.</li>
         <li>Over 320 trees were assessed as either already compromised or at risk due to their location in the leak zone. The cost of removing and replacing a dead tree can be $2-3,000.</li>
      </ul>
   </div>
</div>
css google-chrome flexbox developer-tools
1个回答
0
投票

高度为100%的iframe将跨度推到div之外。您可以删除高度,然后看到跨度将在div区域内。

.gl-bot2-flex {
  display: flex;
  justify-content: space-between;
}

.gl-bot2-left,
.gl-bot2-right {
  width: 47%;
  border: 1px solid blue;
}

iframe {
  border: 0;
}
<div class="gl-bot2-flex">
  <div class="gl-bot2-left">
    <iframe src="https://www.google.com/maps/d/embed?mid=1EhOE6w1_iHeWWpE_Y52YQjVKf3jxXOV6" width="100%"><br />
      </iframe>
    <span class="gl-pin">click on pin to see further details of gas leak</span>
  </div>
  <div class="gl-bot2-right">
    <ul>
      <li>The Audit confirmed 292 unrepaired gas leaks in Weston: 66% more than reported by National Grid 12/31/18. 35% of Weston’s leaks are large volume leaks.</li>
      <li>Using the industry standard “leak extent” method, 102 of the leaks measured 2,000 ft2 or more. These large volume leaks are deemed of “Significant Environmental Impact” (G3SEI) according to the latest ruling by the Department of Public Utilities.</li>
      <li>The largest leak in Weston was first recorded by National Grid<br> in April 1999 and measures 14,400 ft2 – larger than 5 tennis courts.</li>
      <li>Over 320 trees were assessed as either already compromised or at risk due to their location in the leak zone. The cost of removing and replacing a dead tree can be $2-3,000.</li>
    </ul>
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.