2010-10-05 76 views
0

我一直在盡一切可能嘗試將側邊欄浮動到左側,並使其適合旁邊的內容div,但它似乎對我來說是不可能的。請幫忙。Divs不會浮動

HTML:

<div class="index-page">  

     <img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header"> 
     <h1> Welcome to Elektrik Host! </h1> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
     egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
     Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris 
     placerat eleifend leo.</p> 
     <h1> A little about us </h1> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
     egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
     Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris 
     placerat eleifend leo.</p> 
    </div><!-- //index-page --> 
    <div class="sidebar"> 

     <img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers"> 

    </div><!-- //.sidebar --> 

CSS:

.index-page { color: #000; width: 462px; } 
.sidebar { float: right; width: 200px; } 

clearfix:

.clearfix:after { 
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 
+0

然後你錯誤地將它浮動,你的標記中有'.sidebar {float:right;}'。 – 2010-10-05 03:27:20

回答

0
  1. .sidebar { float: left; width: 200px; }right
  2. 爲了讓他們身旁:
        - 索引頁還需要floatleft太index-page{ float: left;}(FF需求,即不)
        - 移動工具條索引頁的前
+0

如果你單獨離開'index-page',移動'sidebar'先來,給它一個'width'並定義'float','index-page'會自己處理。 – 2010-10-05 03:37:57

+0

在我的測試中,如果index-page沒有浮動,那麼它顯示在下面(在我的情況下是FF)。哦,IE不需要。但FF要求@ _ @ – pinichi 2010-10-05 03:40:52

0

您可以按照本教程:http://css.maxdesign.com.au/floatutorial/index.htm

CSS代碼

.floatright { float: right; } 

HTML代碼

<p> 
<img class="floatright" src"images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers"> 
<p> 

你不需要做的正好類應用單一的形象。

PK

2

我總覺得它更容易把float -ing內容提前,使得這樣它的內容,所以我切換側邊欄來提前index-page股利,並用以下CSS:

.sidebar { 
    width: 200px; 
    float: left; 
    } 

演示結束於JS Bin