带有iFrame的CSS浮点问题

我在页面上添加了一个Iframe，它将我的侧边栏向下推。我尝试了不同的方法让它浮动，但我还是被卡住了。任何帮助都将不胜感激。以下是页面的HTML和CSS：

HTML:

将这些行添加到您的侧栏容器id中，然后重试

---

另外，您在一个主div中添加了一个iframe和这个

side\u bar

类，并且没有指定它们的位置

问题是由于关闭

关闭

现在

<div id="content">

bla bla bla

<div id="sidebar-container">
   bla bla bla

</div> <!-- closing sidebar  -->
</div> <!-- closing content  -->

呜呜呜呜
呜呜呜呜

将其更改为

<div id="content">
bla bla bla
</div> <!-- closing content  -->

<div id="sidebar-container">
   bla bla bla
</div> <!-- closing sidebar  -->

呜呜呜呜
呜呜呜呜

您的问题不是由于UL引起的iframe问题

它占用了它的空间，你在div中留下了内容

<div class="left_container">
<!-left content-->

    <iframe width="65%" height="400" align="left" src="http://lkwalkerwriting.blogspot.com/">
      &amp;amp;lt;p&amp;amp;gt;Your browser does not support iframes.&amp;amp;lt;/p&amp;amp;gt;
    </iframe><br>
    <ul style="
    /* width: 108px; */
    /* float: left; */
    clear: both;
">
    <li><a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"> New York Times -
    Upward Facing Soldier </a></li>
    <li><a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga">Mother Nature News -
    Do you need to be Skinny to do Yoga?</a></li>
    <li><a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"> Mother Nature News -
    What is Energy Medicine Yoga?</a></li>
    </ul>
  </div>
<div class="sidebar_container">

  <!--sidebar content-->
</div>

---

保持css与您的相同，谢谢。

这是一个混乱的修复程序，但应该暂时解决问题。如果你在你的css中做了这些改变，那么它应该是一致的。我在firefox上使用Firebug对其进行了测试，效果很好

.content {
    float: left;
    font-size: 120%;
    margin: 25px 0 0;
    text-align: left;
    width: 940px;
}

.content ul {
    float: left;
    margin: 2px 0 22px;
}

sidebar {
    background: none repeat scroll 0 0 #EFF8FB;
    border-radius: 7px;
    display: inline;
    float: right;
    margin: -450px 0 17px;
    padding: 0 15px 5px 13px;
    vertical-align: top;
    width: 180px;
}

---

我不建议这是一个永久性的解决方案，但同时它应该会有所帮助。

您能否为我们提供www.jsfiddle.net演示或您的错误屏幕截图，以便进行更清晰的说明。

img.paperclip

具有负边距，可以向下推动侧栏。iframe下方的

宽度未设置。您应该使用Firebug或其他调试工具检查每个元素的宽度。您还可以增加页面宽度。

<div id="content">
bla bla bla
</div> <!-- closing content  -->

<div id="sidebar-container">
   bla bla bla
</div> <!-- closing sidebar  -->

<div class="left_container">
<!-left content-->

    <iframe width="65%" height="400" align="left" src="http://lkwalkerwriting.blogspot.com/">
      &amp;amp;lt;p&amp;amp;gt;Your browser does not support iframes.&amp;amp;lt;/p&amp;amp;gt;
    </iframe><br>
    <ul style="
    /* width: 108px; */
    /* float: left; */
    clear: both;
">
    <li><a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"> New York Times -
    Upward Facing Soldier </a></li>
    <li><a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga">Mother Nature News -
    Do you need to be Skinny to do Yoga?</a></li>
    <li><a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"> Mother Nature News -
    What is Energy Medicine Yoga?</a></li>
    </ul>
  </div>
<div class="sidebar_container">

  <!--sidebar content-->
</div>

.left_container
{
width: 69%;
float: left;
}

.content {
    float: left;
    font-size: 120%;
    margin: 25px 0 0;
    text-align: left;
    width: 940px;
}

.content ul {
    float: left;
    margin: 2px 0 22px;
}

sidebar {
    background: none repeat scroll 0 0 #EFF8FB;
    border-radius: 7px;
    display: inline;
    float: right;
    margin: -450px 0 17px;
    padding: 0 15px 5px 13px;
    vertical-align: top;
    width: 180px;
}