span 没有出现在它的 div 中答案

【问题标题】：span not appearing inside it's divspan 没有出现在它的 div 中
【发布时间】：2020-02-12 15:28:50
【问题描述】：

使用chrome开发者，为什么iframe后面的span没有出现在它的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>

【问题讨论】：

你的意思是当你用开发工具检查这个时，gl-pin 类的跨度不在打开 <div class="gl-bot2-left"> 和关闭 </div> 之间？
无法重现问题。它出现在我的 div 元素中。

标签： css google-chrome flexbox google-chrome-devtools developer-tools

【解决方案1】：

高度为 100% 的 iframe 将跨度推到 div 之外。您可以删除高度并查看跨度将在 div 区域内。您可以做一些不同的事情来使 iframe 几乎全高，并在其下放置文本。下面是一个使用计算高度的示例。

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

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

iframe {
  border: 0;
  height: calc(100% - 25px);
}

<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>

【讨论】：