我的div不会正确对齐。为什么？

这个网页在Dreamweaver中看起来不错，但是当我在任何浏览器中查看它时，3列不在wrapper2 id内。它甚至没有出现。我无法弄清楚为什么。我的div不会正确对齐。为什么？

这是我的HTML代码

<body> 
    <div id="wrapper"> 
     <div id="header"> 
      <div id="menu"></div> 
     </div> 
     <div id="wrapper2"> 
      <div id="leftpane"></div> 
      <div id="bodycontent"></div> 
      <div id="rightpane"></div> 
     </div> 
     <div id="footer"></div> 
    </div> 
</body>

这里是CSS

#wrapper { 
    width: 900px; 
    background-color: #666; 
    margin-right: auto; 
    margin-left: auto; 
} 
#wrapper #header #menu { 
    background-color: #00F; 
    height: 50px; 
    width: 900px; 
    position: relative; 
    top: 150px; 
} 
#wrapper #header { 
    background-image: url(../images/index_03.gif); 
    height: 200px; 
    width: 900px; 
} 
#wrapper2 { 
    position:relative; 
    width:900px; 
    background-color:#999; 
    height:auto; 
} 
#leftpane { 
    width:200px; 
    height:347px; 
    background-color:#C96; 
    left:0px; 
    top:0px; 
    margin:5px; 
    float:left; 
} 
#rightpane { 
    width:200px; 
    height:347px; 
    background-color:#C96; 
    margin:5px; 
    float:right; 

} 
#bodycontent { 
    width:400px; 
    margin:5px; 
    height:347px; 
    background-color:#C96; 
    float:left; 
} 
#footer { 
    width:900px; 
    height:80px; 
    background-color:#0C6; 
}

请有人可以帮我在这？

来源

2012-02-05 guitarlass

你可以请设置演示@ http://jsfiddle.net？ – PeeHaa 2012-02-05 14:28:20

http://jsfiddle.net/mayRY/ - 除非我错过了一些东西，它实际上看起来不错。 – 2012-02-05 14:31:10

@PeeHaa我[已添加]（http://jsfiddle.net/E7yBJ/1/） - 问题看起来像'height：auto;'不适用于浮动元素 - 请参阅我的示例中的设置到固定的高度，它看起来很好.. – 2012-02-05 14:31:46

从外观上看，你并没有清理浮动的#wrapper2元素。尝试清除包装如下：

#wrapper2:before, #wrapper2:after { 
    content:""; 
    display:table; 
    zoom:1; /* ie fix */ 
} 

#wrapper2:after { 
    clear:both; 
}

来源

2012-02-05 14:35:18

谢谢... Andres Ilich它的工作，:) – guitarlass 2012-02-08 14:18:52

@guitarlass伟大的，如果答案清除了你的问题，请考虑接受它，除了答案使用复选标记。这样可以帮助未来的用户解决同样的问题。 – 2012-02-17 14:25:20

嘿找不到它.. – guitarlass 2012-02-18 04:50:40

我的div不会正确对齐。为什么？

回答

相关问题