不可能的CSS佈局？

我一直在與此工作一段時間，我很確定它無法解決。只是覺得應該把它扔出去，以找出是否有人比我聰明的自己看着辦吧（不改變標記！:)不可能的CSS佈局？

下面的佈局是典型的無表格基於CSS的設計，頁眉和頁腳之間夾着兩列（內容和側欄）使用浮動和相對定位。

這個特殊的佈局是一個WordPress主題，我用css和圖像設計了幾十個站點。這就是爲什麼我的要求是標記保持原樣。

我希望「頭像」div保持錨定在標題div的頂部，而不管「精選」的高度和不使用「position：fixed」或更改標記順序。如果您複製下面的代碼並將其保存爲.html文件，您會發現它剛剛開箱即用。但是，一旦您從「精選」中增加或減少高度，「頭像」將相應地向上或向下移動。這是挑戰，無論「精選」的維度如何，我都需要虛擬形象保持在相對身體的零位。

將「側邊欄」設置爲絕對定位將是顯而易見的解決方案，但是，它會使內容和側欄下方的頁腳div（無論哪個更高）流通。

我在想，答案可能在於表格顯示屬性之一（因爲這本質上是從側邊欄創建一個未合併的單元格，並將其頂部邊距設置爲相對於其父容器），但這是一個CSS領域我基本上一個人留下了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head> 
    <title>CSS Float Challenge</title> 
<style> 
body {margin:0;padding:0;} 
.header {height:100px; background:red; width:977px; margin:0 auto;} 
.main {width:977px; margin:0 auto;} 
.featured {background:green;height:50px;} 
.content {float:left; min-height:300px; border:1px solid #777; width:700px;} 
.sidebar {background:blue; width:250px; float:right; min-height:400px} 
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;} 
.clear {clear:both;} 
.avatar { width:200px; background:orange; margin-top:-150px;} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="header">header</div> 
    <div class="main"> 
     <div class="featured">featured content goes here</div> 
     <div class="content">content goes here</div> 
     <div class="sidebar"> 
      <div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div> 
      <div>This content should flow below avatar relative to avatar's height</div> 
     </div> 
     <div class="clear">&nbsp;</div> 
     <div class="footer">footer is here</div> 
    </div> 
</div> 
</body> 
</html>

來源

2010-09-28 Scott B

怎麼是這樣的：相對於側邊欄

alt text

阿凡達，並留在流頭浮動權？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head> 
    <title>CSS Float Challenge</title> 
<style> 
body {margin:0;padding:0;} 
.header {height:100px; background:red; width:977px; margin:0 auto;z-index:1000;position:relative;} 
.main {width:977px; margin:0 auto;} 
.featured {background:green;height:50px;} 
.content {float:left; min-height:300px; border:1px solid #777; width:700px;} 
.sidebar {background:blue; width:250px; float:right; min-height:400px} 
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;} 
.clear {clear:both;} 
.avatar { width:200px; background:orange; /*margin-top:-150px;*/ } 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="header"> 
     <div id="header_stuff" style="float:left;">header</div> 
     <div id="side2" style="float:right;background-color:blue;"><div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div> 
      <div class="sidebar"> 
       <div>This content should flow below avatar relative to avatar's height</div> 
      </div> 
     </div> 
    </div> 
    <div class="main"> 
     <div class="featured">featured content goes here</div> 
     <div class="content">content goes here</div> 

     <div class="clear">&nbsp;</div> 
     <div class="footer">footer is here</div> 
    </div> 
</div> 
</body> 
</html>

編輯：也許這更接近。如果標題部分需要位於頂部（z-index等），則可以調整藍色側邊欄。

來源

2010-09-28 04:23:18

這的jsfiddle – Strelok 2010-09-28 04:28:31

@Strelok向下移動邊欄，我在Chrome：更新 – 2010-09-28 04:49:51

試試這個：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
    <head> 
     <title>CSS Float Challenge</title> 
     <style> 
      *{margin:0;padding:0;} 
      body{margin:0;padding:0;} 
      .wrapper{width:977px;margin:0 auto;} 
      .header{height:100px;background:red;} 

      .leftColumn{float:left;width:700px;} 
      .featured{background:green;height:50px;} 
      .content {min-height:300px;border:1px solid #777;} 

      .sidebar {background:blue;width:250px;float:left;margin-left:27px;min-height:400px} 
      .avatar {width:200px; background:orange;margin-top:-100px;} 

      .clear {clear:both;} 

      .footer{background:gold;height:100px;clear:both;} 

     </style> 
    </head> 
    <body> 
     <div class="wrapper"> 

      <div class="header">header</div> 

      <div class="main"> 

       <div class="leftColumn"> 
        <div class="featured">featured content goes here</div> 
        <div class="content">content goes here</div> 
       </div><!--.leftColumn--> 

       <div class="sidebar"> 
        <div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div> 
        <div>This content should flow below avatar relative to avatar's height</div> 
       </div><!--.sidebar--> 

       <div class="clear">&nbsp;</div> 

       <div class="footer">footer is here</div> 

      </div><!--.main--> 

     </div><!--.wrapper--> 

    </body> 
</html>

來源

2010-09-28 05:24:13 xmarcos

不可能的CSS佈局？

回答

相關問題