2010-11-02 22 views
2

考虑下面的HTML:两个div左右浮动:页面大小调整时,如何将它们保持在同一水平上?

<!DOCTYPE html> 
<html> 
<body> 
    <div id="container"> 
    <div id="left" style="float: left; background-color: #777; width: 500px;"> 
     Here is some content. Blah blah blah etc. 
     <div style="height: 50px;">Some more content</div> 
     And finally some more. 
    </div> 
    <div id="right" style="float: right; background-color: #aaa; width: 500px;"> 
     Here is some content. Blah blah blah etc. 
     <div style="height: 50px;">Some more content</div> 
     And finally some more. 
    </div> 
    <div style="float: clear;"></div> 
    </div> 
</body> 
</html> 

我能做些什么来div#container或其他标记,以防止div#rightdiv#left下移动时我调整浏览器窗口使得这些窗口宽度越小则1000px

回答

7

设置一个min-width您的容器:

#container { 
    min-width: 1000px; 
} 
2

#container DIV a min-width: 1000px财产,这样的父母将永远足够宽,以保持两个孩子并排。

-2

http://www.w3schools.com/css/default.asp我学会了所有我在这里的CSS,有上定位一节,是非常有帮助的,我建议阅读它,现在你的工作,以及未来的项目。

尝试:

#container { 
    position: relative; 
} 
+0

没有这样做。你应该改变你的答案或删除代码。虽然我欣赏这个链接。我会检查出来的。 – DJTripleThreat 2010-11-02 23:41:14

0

div容器不是在你的代码关闭。请检查一次,并应用min-width:1000px;

相关问题