Question

我有一个包含3列的页面，一个向左浮动，一个浮动到右侧，一个浮动在中心。在中央区块内，我需要使用几个块，左边有一个图像，左边是文本。这会产生一个奇怪的显示错误，每个块都缩进一点。一个明确的：既修复了错误，又打破了页面框架之外的块。该页面的html代码的简化版本可以在下面找到：

<div id="leftbar">Navigation</div>
<div id="rightbar">Right bar</div>
<div id="content">
    <div class='content-block'>
         <span class='image-floated'><img src='image'/></span>
         <span>Some content</span>
         <div class='someother_content'>content</div>
         <div class='content_bottom'>stuff</div>
    </div>
    <div class='content-block'>
       <span class='image-floated'><img src='image'/></span>
       <span>Some content</span>
       <div class='someother_content'>content</div>
       <div class='content_bottom'>stuff</div>
   </div>
</div>

和css如下：

 #leftbar
 {
    float: left;
    width:  10%;
 }

 #rightbar
 {
    float: right;
    width: 20%;
 }

 .image-floated
 {
    float: left;
    width: 55px;
 }

 .content-block
 {
     padding-top: 3px;
 }

我该如何解决这个问题？提前谢谢

Answer 1

只需在overflow:hidden;中写下#content，就像这样：

#content{overflow:hidden;}

检查小提琴http://jsfiddle.net/RcEBf/

Answer 2

如果您将左栏放在适当的高度，则会停止图片浮动到中央div。

#leftbar
{
float: left;
width:  10%;
height: 500px;
}

浮动相互影响？

2 个答案: