Question

我已经使用了一段时间了，我很确定它无法解决。只是想我会把它扔掉，看看是否有人能比我聪明（不改变标记！）

下面的布局是一种典型的无表格css设计，页眉和页脚使用浮动和相对定位夹在两列（内容和侧边栏）之间。

这个特殊的布局是一个WordPress主题，我用css和图像设计了几十个网站。这就是为什么我的要求是标记保持原样。

我希望“avatar”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>

Answer 1

试试这个：

<!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>

Answer 2

这样的事情怎么样：

alt text

Avatar和Sidebar相对于标题是否向右浮动以留在流中？

    <!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等），则可以调整蓝色侧边栏。

不可能的CSS布局？

2 个答案: