我需要在我的CSS中更改什麼

Question

我以前有過表格來顯示內容，這裏的人建議我刪除表格並使用CSS浮動以獲得更好的樣式。

我對一切都很陌生。我的問題是我有內容和側欄。我希望它可以顯示像

content   | Sidebar 

但現在隨着電流的造型我有它顯示象

content 
| 
Sidebar 

能否請您指正。

 <style type="text/css"> 

    .csscontent 
    { 

      margin-right: 500px; 



    } 

    .csssidebar 
    { 
     float: right; 
     width: 500px; 
     background: darkgreen; 
     /* height:500px; */ 



    } 


</style> 

如果我添加

<div class="Content"> 
    all the content 
<div class="sidebar"> 
<Image> 
</div> 

如果我添加圖像得到顯示的內容留下500px的右緣下方里面的內容欄。

如果我在內容之外添加側邊欄，圖像顯示在內容下方。

<div class="Content"> 
    all the content 
    </div> 

    <div class="sidebar"> 
    <Image> 
    </div> 

我希望讓他們堆疊起來互相內容和邊條並排

Answer 1

在HTML文件中，您首先需要設置浮動元素，然後是無浮動元素。因爲浮動元素將阻止網站的整個「級別」，並將浮動元素放置在下方。

所以你的HTML應該是這樣的：

<div class="sidebar"> 
    <Image> 
    </div> 
    <div class="Content"> 
    all the content 
    </div> 

其他然後，它看起來不錯。

Answer 2

浮動都被顯示側向左。

.Content 
    { 
      margin-right: 500px; 
      float: left; 
    } 

    .sidebar 
    { 
     float: left; 
     width: 500px; 
     background: darkgreen; 
    } 

Answer 3

添加浮子.csscontent類等

.csscontent 
    { 
      margin-right: 500px; 
      Float:left; 
    } 

Answer 4

.content, .sidebar { 
    float: left; 
} 

浮動兩者的div左像上面將顯示內聯。

然後，您可以將具體樣式應用於每個班級。將寬度指定爲.content將確定.sideside的出現位置...

Answer 5

或者如果您只想將側邊欄浮動到右側而不會浮動內容，則應該將側邊欄放在HTML內容的上方。

當然，您仍然需要更正類名...

Answer 6

您可以爲這兩個元素添加包裝。

<div id="wrapper"> 

    <div id="content"> 
     all the content 
    </div> 

    <div id="sidebar"> 
     <img/> 
    </div> 

</div> 

div#wrapper { 
    position:relative; 
    overflow:hidden; 
    width:800px; 
} 

div#content { 
    float:left; 
    width:600px; 
} 

div#sidebar { 
    float:right; 
    width:200px; 
} 

Answer 7

看到搗鼓代碼和演示

小提琴：http://jsfiddle.net/g42x2/1/

演示：http://jsfiddle.net/g42x2/1/embedded/result/

SS：