我可以在css中懸浮身體嗎？

我不好整合它的crasy。我浮動了很多東西，發現無論何時我開始浮動東西時，我都必須將其容器和容器容器浮起來，因爲否則容器就會摺疊。我可以在css中懸浮身體嗎？

所以看着我的網站現在它的漂亮穩定，但如果我在身體上放一個邊框，我會發現它的頂部高1px，身體的一切都在外面。如果我漂浮身體，那麼一切看起來不錯，但：

1-這是不好的設計，我應該怎麼做？

2-如果它確定我該如何居中？我使用margin：auto。但一旦身體浮動，它就停止工作。

這是我的CSS。

body { 
    width: 960px; 
    font-size: 13px; 
    margin: auto; 
    margin-top: 20px; 
    border: 1px #000 solid; 
} 

.wrapper { 
    float: left; 
    width: 960px; 

} 

.header { 
    float: left; 
    width: 960px; 
    border: 1px #000 solid; 
    margin-bottom: 20px; 
} 

.menu { 
    width: 960px; 
    float: left; 
    border: 1px #000 solid; 
} 

.sidebar { 
    width: 260px; 
    float: left; 
    margin-top: 20px; 
    margin-left: 20px; 
} 

.content { 
    border: 1px #000 solid; 
    margin-left: 20px; 
    margin-top: 20px; 
    width: 620px; 
    float: left; 
    padding: 10px; 
} 

.footer { 
    border: 1px #000 solid; 
    width: 960px; 
    float: left; 
    margin-top: 20px; 
}

而且佈局文件：

<body> 
     <div class="wrapper"> 
      <div class="header"> 
       <h1>HEADER</h1> 
      </div> 
      <div class="menu"> 
       <ul> 
        <li><a href="/">Home</a></li> 
       </ul> 
      </div> 
      <div class="sidebar"> 
       sidebar 
      </div> 
      <div class="content"> 
        <h1>Content</h1> 
      </div> 
      <div class="footer"> 
       <h1>FOOTER</h1> 
      </div> 
     </div> 
    </body>

不管怎麼說希望我是清楚的。

來源

2010-08-25 Iznogood

用overflow: auto替換float它應該工作得很好。然後，您可以用margin: auto居中：

.wrapper { 
    overflow: auto; 
    margin: auto; 
    width: 960px; 
}

此外，從body刪除width: 960px和margin: auto因爲你不需要他們了。

來源

2010-08-25 17:36:10 BoltClock

!!現在它工作了！你第一次評論後，我身體四溢。我全都沒票了，但我不會忘記回來給你一點。 – Iznogood 2010-08-25 17:54:52

嘿，我的選票太：P – BoltClock 2010-08-25 18:01:07

投票只是爲了確保正確的答案得到一票：P – 2010-08-25 19:32:37

如果您將容器的overflow設置爲auto或hidden您不應該將其浮動（除非出於其他原因）。如：

<div id="container"> 
    <div id="left">Content! this should be floated left</div> 
</div> 

#container { overflow: auto; border: 1px solid #000; } 
#left { float: left; }

應該有container顯示與所有內容的邊界。

來源

2010-08-25 17:35:43 swilliams

它沒有工作。奇怪......我會發布css和佈局文件。 – Iznogood 2010-08-25 17:43:20

是的，像這樣浮動的所有元素是糟糕的設計和濫用浮動元素。學習元素的自然流動和正確使用CSS位置是非常值得的。

來源

2010-08-25 17:57:20 Rob

坦白地說，如果我很幸運我們會找到一個集成商（你用英語說這個嗎？）並用css完成。 :-) 你會說BoltClock修復後的設計不好嗎？ – Iznogood 2010-08-25 18:04:54

我可以在css中懸浮身體嗎？

回答

相關問題