我有一个CSS问题。我的文字潜入另一个div，我无法找到原因。在检查器中打开时，我也看到div只有文本（命名为activebox）与其他CSS杂乱。 div应该只是在文本周围，而不是整个第一部分。我当然看过类似的问题＆＃39;首先，我没有找到答案。我哪里做错了？我的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST PAGE</title>
<link rel="stylesheet" href="style.css">
<script src="http://gdaygday.com/skin/clean-jplayer-skin/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://gdaygday.com/skin/clean-jplayer-skin/js/jquery.jplayer.js"></script>
<script type="text/javascript" src="http://gdaygday.com/skin/clean-jplayer-skin/js/jplayer.cleanskin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).find('.webPlayer').each(function() { $('#'+this.id).videoPlayer(); });
});
</script>
</head>
<body><div id="wrap">
<div class="logo">logo</div>
<div id="uniquePlayer-6" class="webPlayer light audioPlayer">
<div id="uniqueContainer-5" class="videoPlayer"></div>
<div style="display:none;" class="playerData"> {
"name": "FavoriteFM LIVE",
"autoplay": "true",
"size": {
"width": "600px" },
"media": {
"mp3": "http://media.xseu.net/FavoriteFM"
}
} </div>
</div>
<div id="main">
<div class="Head">
<h1>Dit is CHX.</h1></div>
<div class="underscore"><h5>Je neemt ons overal mee.</h5></div>
<div id="section1">
<div class="tile1"><div class="tile1title">Jess Glynne + Tinie Tempah <br> Not Letting Go</div></div>
<div class="tile2"><div class="tile2title">Jess Glynne + Tinie Tempah <br> Not Letting Go</div></div>
<div class="tile3"><div class="tile3title">Jess Glynne + Tinie Tempah <br> Not Letting Go</div></div>
<div class="tile4"><div class="tile4title">Jess Glynne + Tinie Tempah <br> Not Letting Go</div></div>
<div class="tile5"><div class="tile5title">Jess Glynne + Tinie Tempah <br> Not Letting Go</div></div>
</div>
<div id="activebox">test</div>
<div class="NieuwHead"> <h1>Nieuw op CHX</h1></div>
<div class="underscore"><h5>De nieuwste muziek.</h5></div>
<div class="Nieuw">
<div class="track1"><div class="track1title">Jess Glynne + Tinie Tempah <br> Not Letting Go</div></div>
<div class="track2"><div class="track2title">Jess Glynne + Tinie Tempah <br> Not Letting Go</div></div>
<div class="track3"><div class="track3title">Jess Glynne + Tinie Tempah <br> Not Letting Go</div></div>
<div class="track4"><div class="track4title">Jess Glynne + Tinie Tempah <br> Not Letting Go</div></div>
</div>
</div>
</div>
</body>
</html>
CSS：
body {
background:url(img/bg.jpg);
height:100%;
}
.logo {
color: white;
font-size: 36px;
font-family:verdana;
font-weight:bold;
}
#wrap {
position:relative;
top: -10px;
margin: auto;
width: 810px;
height:100%;
padding: 10px;
display:block;
}
html {
height: 100%;
}
h1 {
color: white;
font-family:Verdana;
}
h5 {
color: white;
font-family:Verdana;
}
.underscore {
position:relative;
top:-15px;
text-align:center;
}
#main {
float: left;
background:orange;
}
.Nieuw {
float: left;
max-width:1040px;
position:relative;
top:-10px;
}
.Head {
max-width:1040px;
}
.NieuwHead {
max-width:1040px;
position:relative;
text-align:center;
top:10px;
}
.divider {
max-width:1040px;
position:relative;
text-align:center;
top:10px;
}
.activebox1 {
display: block;
}
.nieuwcontent {
float: left;
max-width:1040px;
top:-10px;
position:relative;
}
.track1 {
float: left;
height: 200px;
width: 400px;
background: red;
color: white;
font-family: Verdana;
}
.track1title {
top:150px;
position:relative;
float: left;
}
.track2 {
position:relative;
left: 10px;
float: left;
height: 200px;
width: 400px;
background: blue;
color: white;
font-family: Verdana;
}
.track2title {
top:150px;
position:relative;
float: left;
}
.track3 {
position: relative;
top: 10px;
float: left;
height: 200px;
width: 400px;
background: red;
color: white;
font-family: Verdana;
}
.track3title {
top:150px;
position:relative;
float: left;
}
.track4 {
position: relative;
top: 10px;
left: 10px;
float: left;
height: 200px;
width: 400px;
background: blue;
color: white;
font-family: Verdana;
}
.track4title {
top:150px;
position:relative;
float: left;
}
.tile1 {
float: left;
height: 200px;
width: 500px;
background: red;
color: white;
font-family: Verdana;
}
.tile1title {
top:150px;
position:relative;
float: left;
}
.tile2 {
position:relative;
left: 10px;
float: left;
height: 200px;
width: 300px;
background: blue;
color: white;
font-family: Verdana;
}
.tile2title {
top:150px;
position:relative;
float: left;
}
.tile3 {
position: relative;
top: 10px;
float: left;
height: 200px;
width: 250px;
background: red;
color: white;
font-family: Verdana;
}
.tile3title {
top:150px;
position:relative;
float: left;
}
.tile4 {
position: relative;
top: 10px;
left: 10px;
float: left;
height: 200px;
width: 240px;
background: blue;
color: white;
font-family: Verdana;
}
.tile4title {
top:150px;
position:relative;
float: left;
}
.tile5 {
position: relative;
top: 10px;
left: 20px;
float: left;
height: 200px;
width: 300px;
background: red;
color: white;
font-family: Verdana;
}
.tile5title {
top:150px;
position:relative;
float: left;
}
.Head {
text-align:center;
}
.webPlayer { display: block; position: relative; font-family: 'Segoe UI', Verdana, sans-serif; clear: both; margin-bottom: 10px; line-height: 1.4; font-size: 13px; text-align: center; /* Chrome FIX for full screen */ }
.webPlayer a.smooth { transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; }
.webPlayer.jp-video-full > .controls { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0.8; z-index: 1000; }
.webPlayer.jp-video-full, .webPlayer.jp-video-full object, .webPlayer.jp-video-full video { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 999; }
.webPlayer.jp-video-full > .playerScreen, .webPlayer.jp-video-full > .playerScreen > .video-play { z-index: 1000; }
.webPlayer .playerScreen { cursor: pointer; }
.webPlayer .playerScreen .video-play { display: block; position: absolute; z-index: 990; width: 100%; top: 0; left: 0; right: 0; bottom: 50px; background: url("preimg.png") no-repeat center center; opacity: 0.4; background-color: rgba(0, 0, 0, 0.4); }
.webPlayer .controls { display: block; position: relative; height: 40px; color: #969696; padding: 5px 10px; z-index: 996; }
.webPlayer .controls .leftblock { position: absolute; left: 3px; width: 50px; }
.webPlayer .controls .leftblock .play { display: block; width: 40px; height: 40px; background: url("playerUI.png") no-repeat 0 1px; opacity: 0.8; }
.webPlayer .controls .leftblock .play:hover { opacity: 1; }
.webPlayer .controls .leftblock .pause { display: block; width: 40px; height: 40px; background: url("playerUI.png") no-repeat -40px 1px; opacity: 0.8; }
.webPlayer .controls .leftblock .pause:hover { opacity: 1; }
.webPlayer .controls .progress { position: relative; display: block; margin: 0 130px 0 50px; text-align: left; }
.webPlayer .controls .progress span { font-size: 24px; margin-left: 1px; color: #f0f0f0; }
.webPlayer .controls .progress .progressbar { display: none; height: 4px; background-color: #3C3C3C; background: rgba(255, 255, 255, 0.05); margin: 2.5px 0; }
.webPlayer .controls .progress .progressbar .seekBar { position: relative; display: none; cursor: pointer; padding: 1px; background: rgba(255, 255, 255, 0.1); }
.webPlayer .controls .progress .progressbar .seekBar .playBar { display: block; height: 2px; padding: 0; background: #FFFFFF; }
.webPlayer .controls .progress .progressbar .seekBar a { display: block; position: absolute; top: -2px; width: 8px; height: 8px; border-radius: 5px; background: #ffffff; margin-left: -3px; }
.webPlayer .controls .progress .progressbar .seekBar a div { width: 8px; height: 8px; }
.webPlayer .controls .progress .time { display: none; position: absolute; width: 50px; font-size: 11px; }
.webPlayer .controls .progress .time.current { left: 1px; text-align: left; color: #f0f0f0; }
.webPlayer .controls .progress .time.duration { right: 0px; text-align: right; }
.webPlayer .controls .rightblock { position: absolute; right: 10px; width: 110px; top: 5px; }
.webPlayer .controls .rightblock .volumeText { display: block; position: absolute; bottom: -12px; text-align: center; width: 80px; font-size: 11px; }
.webPlayer .controls .rightblock .volumeBar { display: block; position: absolute; height: 4px; background-color: white; width: 80px; top: 19px; left: 0; cursor: pointer; }
.webPlayer .controls .rightblock .volumeBar .currentVolume { position: relative; height: 2px; padding: 1px; }
.webPlayer .controls .rightblock .volumeBar .currentVolume .curvol { display: block; height: 2px; padding: 0; background: #FFFFFF; }
.webPlayer .controls .rightblock .volumeBar .currentVolume a { display: block; position: absolute; top: -2px; margin-left: -3px; width: 8px; height: 8px; border-radius: 5px; background: #ffffff; }
.webPlayer .controls .rightblock .volumeBar .currentVolume a div { display: block; width: 8px; height: 8px; }
.webPlayer .controls .rightblock .fullScreen { display: block; float: right; width: 16px; height: 16px; background: url("playerUI.png") no-repeat 0 -50px; margin-top: 12px; opacity: 0.4; }
.webPlayer .controls .rightblock .fullScreen:hover { opacity: 0.8; }
.webPlayer .controls .rightblock .fullScreenOFF { display: block; float: right; width: 16px; height: 16px; background: url("playerUI.png") no-repeat 0 -68px; margin-top: 12px; opacity: 0.4; }
.webPlayer .controls .rightblock .fullScreenOFF:hover { opacity: 0.8; }
.webPlayer.audioPlayer .progress { margin-right: 100px; }
.webPlayer.audioPlayer .rightblock { width: 85px; }
.webPlayer.audioPlayer .rightblock .volumeText { bottom: -42px; }
.webPlayer.audioPlayer .fullScreen { display: none; }
.webPlayer.audioPlayer .fullScreenOFF { display: none; }
我希望有人可以帮助我。
答案 0 :(得分：0)
您的CSS中存在一些布局问题。您宣布tiles 1-5的高度，并且这些高度超出了其父容器#section1的边界。尝试为#section1容器设置一个高度，例如410px，以便将10px与tile元素的顶部偏移量计算在内。
#section1{
...
height:410px;
...
}