Question

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

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

跨度未显示在div

1 个答案: