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佈局的地方文字的旁邊，而不是下面

回答

相關問題