Question

在下面的代码中，左侧div正确显示，但div中iframe的右侧显示在div之外。它显示为top，但我想在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; 
}

Answer 1

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

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

#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;
}

在div中iframe中没有显示在html中

1 个答案: