在 div iframe 中不显示在 html 中答案

【问题标题】：within in the div iframe not displaying in html在 div iframe 中不显示在 html 中
【发布时间】：2015-05-04 00:05:08
【问题描述】：

在下面的代码中，左侧div 显示正确，但div 的右侧iframe 显示在div 之外。它显示在顶部，但我想在 div 空间中显示。

html

<div id="details">
        <div id="left">
         <h2>Bangalore</h2>
    <img src="img/vcare_logo.png" width="100" height="83" alt="smoothy html5 template" hspace="50"/>
     <p><b><strong>rgd</b></strong><br>gf560032</p>
    </div>
   <div id="right">
   <h2>Upcoming News</h2>
<iframe id="NewsWindow" seamless src="news_win.htm" width="150" height="204" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="display: block; margin: 0 auto; padding: 0; border: #000000 1px solid;"></iframe>   
</div>
    </div>

css

#details  {   
  overflow:auto;
  width: 1050px;
  border: 1px solid black; 
  background: gray;
  margin: 2em auto;
}
#details h2{
  background-color: #A52A2A;
  color: #FFFFFF; 
  font: 13px arial, sans-serif;
  font-weight: bold; 
  text-align: center;
  padding: 3px;
}
#left, #right {
  width: 45%; 
  margin:5px; 
  padding: 1em;
  background: white;
}

#left {   
  float:left;

}
#right {   
  width: 158px; 
  border: #000000 1px solid; 
  background-color: #339999; 
  text-align: center; 
  padding: 0px 2px 7px 2px; 
  position: absolute; 
  visibility: visible; 
  left: 100px; 
  top: 100px; 
  z-index:3;
  float:right; 
}

【问题讨论】：

Right 得到两个宽度，一个 45%，一个 158px，你也不需要 left 使用 float right

标签： javascript jquery html css iframe

【解决方案1】：

首先将您的 html 代码从 rgd�� 更改为 rgd。

然后将您的 css 更改为 #right，删除绝对定位并使其向左浮动：

#right {
    width: 158px;
    border: #000000 1px solid;
    background-color: #339999;
    text-align: center;
    padding: 0px 2px 7px 2px;
    visibility: visible;
    left: 100px;
    top: 100px;
    z-index:3;
    float:left;
}

【讨论】：