我页面的元素正在脱离“包装器”div。这是结构:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="stilovi.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="wrapper" class="centrDiv">
<div id="levo">
<div id="logo" class="centrSlik">
<img src="wheel.gif"/>
</div>
<div id="podmeni">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</div>
<div id="desno">
<div id="meni">
<ul>
<li></li>
</ul>
</div>
<div id="tekst">
<p>
ttaatareatasfgfgfd
</p>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
</html>
和 CSS 样式:
* { padding: 0; margin: 0; list-style: none; font-family: 'Philosopher', cursive; text-decoration: none; color: black;}
#wrapper{width: 930px; height:100%; margin-top: 15px; background-color: #71637D;}
#meni{background-image: -webkit-gradient(linear, left top, right bottom, from(#FF9999), color-stop(100%, #71637D)); padding: 8px 15px 10px;
-webkit-border-bottom-left-radius: 10px 20px; -webkit-border-top-right-radius:10px 20px; border: 1px solid #FF9999; opacity:0.9; -webkit-box-shadow: 5px 5px 20px #4AC0F2;}
#levo{width: 130px; min-height: 350px; background-image: -webkit-linear-gradient(top, #71637D 120px, #4AC0F2);
float: left;}
#tekst{padding: 20px 15px;}
#tekst p{margin-bottom: 10px;}
#logo{background-color: white;}
#desno{width: 800px; min-height: 350px; background-image: -webkit-linear-gradient(-75deg, #71637D 30%, #4AC0F2); float: right;
-webkit-border-top-right-radius:10px 20px; }
#podmeni ul{height: 220px; -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#FF9999), color-stop(100%, #4AC0F2)) 0 100% 0 0/0 5px 0 0 stretch;}
#meni li{letter-spacing: 2px; font-size: 16px; font-weight: bold; display: inline; margin-right: 5px;}
#meni li:hover{-webkit-border-image: -webkit-gradient(linear, right top, left top, from(#FF9999), color-stop(100%, transparent)) 0 0 100% 0/0 0 5px 0}
#meni a{text-shadow: 0.1em 0.1em #333;}
.centrDiv{margin: 0 auto;}
.centrSlik{text-align: center;}
.nevidljivo{display:none;}
在 firebug 中，所有元素都在 div#wrapper 之外。为什么？？
最佳答案
向 #wrapper 添加“clearfix”或 float:left 似乎可以缓解这个问题。
Clearfix:http://jsfiddle.net/GR2fT/1/
float :http://jsfiddle.net/GR2fT/2/
溢出:隐藏:http://jsfiddle.net/GR2fT/3/
溢出:自动:http://jsfiddle.net/GR2fT/5/
/* one way to clearfix */
.clearfix:after,
.clearfix:before {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
元素仍然“在”#wrapper 中，您只是看不到背景。
当您不能使用 float(未知宽度，但您想要 100% 宽度，例如)时，Clearfix 非常有用。
溢出技巧也很好，但我认为它在现代浏览器中效果最好，并不总是适用。
关于html - div元素不听话，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7183432/