CSS布局的地方文字的旁边，而不是下面

我有我的CSS布局的问题，如下图所示：CSS布局的地方文字的旁边，而不是下面

#wrapper { 
width: 80%; 
} 

#content { 
float: left; 
background: #FFFF00; 
height: 350px; 
width: 70%; 
display: inline; 
} 

#rightcolumn { 
background: #EBE3CD; 
height: 350px; 
width: 30%; 
height: 250px; 
float: left; 
} 

#legendcolumn { 
background: #FF00FF; 
height: 100px; 
width: 30%; 
float: left; 
}

我的HTML的主体如下：

<div id="wrapper"> 
    <div id="content"> 
    Main Content. 
    </div> 
    <div id="rightcolumn"> 
    Right Column. 
    </div> 
    <div id="legendcolumn"> 
    Here comes the legend. 
    </div> 
</div> 

Lorem ipsum dolor sit amet.

不幸的是，文本lorem ipsum dolor sit amet被放置在布局旁边。但是，我想将文本放置在布局下方。如何在不引入新的div容器的情况下实现这一目标？

来源

2010-11-17 labrassbandito

浮动和内联内容导致该问题，但你可以控制与溢出的力量：

#wrapper 
{ 
    width: 80%; 
    overflow: auto; // overflow + float = magic happy land 
}

编辑：你可以看到为什么显示：块和明确的：既不会如果您添加border: 1px solid red;到#wrapper，则工作。浮动的后果之一是，容器将倒塌到非浮动儿童的高度（此处为零）。如果它们引用的元素是零高度，则块和清除将具有零显而易见的影响（块本来就会有 - div本身就是块）。溢出汽车克服了这一点。

来源

2010-11-17 08:53:58 annakata

谢谢annakata。这是目前唯一的解决方案。 * display：block *和* clear：都有帮助。 – labrassbandito 2010-11-17 08:57:51

更新你的CSS这样的：

#wrapper { 
width: 80%; 
display: block; 
}

来源

2010-11-17 08:46:08 Kangkan

Div默认是阻止的，这不应该改变任何东西。 – annakata 2010-11-17 08:47:51

因为你#wrapper指定设置为仅80％的宽度，这些文本元素会尝试用它来填充屏幕的其余20％。，但我认为没有跟随新的div没有确切的解决方案可能解决方法：

#wrapper { 
    width: 100%; 
    padding-right: 20%: 
}

来源

2010-11-17 08:46:56 xandy

没有工作，但* overflow：auto *。 – labrassbandito 2010-11-17 08:58:24

不错的理论，但至少FF不起作用 – annakata 2010-11-17 08:58:36

我的不好！我忽略了那些内部东西的“float：left”。溢出：汽车应该是答案。 – xandy 2010-11-17 09:01:52

，为什么你有#wrapper宽度为80％？改为100％。

来源

2010-11-17 08:46:58

CSS布局的地方文字的旁边，而不是下面

回答

相关问题