分隔导航栏，横幅，页脚，Sponsers和页面内容。 [英] Seperating Navbar, Banner, Footer, Sponsers, and the pages contents.
本文介绍了分隔导航栏，横幅，页脚，Sponsers和页面内容。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的整个页面都在我的主要页面中div。
I have my entire page in my "main" div.
展开 | 选择 | Wrap | < span class =codeLinkonclick =LineNumbers（this）;>行号
推荐答案
您忘记了从正常情况中删除了浮动元素流动和其他元素将假装他们不在那里。因为内容，赞助商 o r，横幅全部浮动，页脚会上升到他们的位置（实际内容除外）。
You are forgetting that floated elements are removed from the normal flow and other elements will pretend they aren''t there. Because content, sponsor, banner are all floated, the footer rises up into their place (except for the actual content).
您忘记了浮动元素已从正常流中移除，其他元素将假装它们不存在。因为内容，赞助商 o r，横幅都是浮动的，所以页脚会上升到他们的位置（实际内容除外）。
You are forgetting that floated elements are removed from the normal flow and other elements will pretend they aren''t there. Because content, sponsor, banner are all floated, the footer rises up into their place (except for the actual content).
然后我该如何解决？我不能摆脱任何花车，因为如果我这样做看起来更糟糕。在内容中，它通过导航栏移动第一行文本。
谢谢，死亡
then how can I fix it? i can''t get rid of any of the floats because if I do it looks even worse. Espesually in the contents, it moves the first row of text way past the nav bar.
Thanks, Death
这是据我所说，在被妻子大吼之前。不要抓住divits，即需要感觉一切都需要包含在div中。
[HTML]<！DOCTYPE html
PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN"
" http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html>
< head>
< title>主页< / title>
< style type =" text / css">
body
{
background-color：black;
}
#wrapper {
仓位：相对;
溢出：自动;
}
.banner {
float：left;
宽度：200px;
身高：650px;
}
。赞助商{
浮动：正确;
宽度： 200px;
身高：650px;
}
.list1 {
float：left;
宽度：30％;
保证金：0自动;
list-style-type：none;
}
a.nav {
float：left;
text-decoration：none;
颜色：＃000;
background-color：＃e00;
填充：0.2em 0.6em;
border-right：1px solid＃000;
字体大小：20px;
}
< / style>
< / head>
< body> ;
< div class =" main">
< div id =" wrapper">
< img class =" banner" SRC =" 2.png" />
< ul class =" list1">
< li class =" navin">< a class = " NAV" href =" Home.html"> Home< / a>< / li>
< li class =" navin">< a class =" nav" href =" Stories.html"> Stories< / a>< / li>
< li class =" navin">< a class =" nav" href =" Blogs.html"> Blogs< / a>< / li>
< li class =" navin">< a class =" nav" href =" Music.html">音乐< / a>< / li>
< li class =" navin">< a class =" nav" href ="视频">视频< / a>< / li>
< li class =" navin">< a class =" nav" href =" About.html">关于< / a>< / li>
< / ul>
< img class = "赞助" SRC =" 2.png" />
< div class =" contents">
<！ - 19个换行符以扩展页面 - >
< br />< br />< br />< br />< br />< br / >< br />< br />< br />< br />< br />< br />< br />< br /> < br />< br />< br />< br />< br />
< / div>
< / div>
< ul class =" list2">
< li class =" footerin1" >< a class =" footer" href =" Home.html"> Home< / a>< / li>
< li class =" footerin1">< a class =" footer" href =" Storys.html"> Storys< / a>< / li>
< li class =" footerin1">< a class =" footer" href =" Blogs.html"> Blogs< / a>< / li>
< li class =" footerin1">< a class =" footer" href =" Music.html">音乐< / a>< / li>
< li class =" footerin1">< a class =" footer" href =" Videos.html">视频< / a>< / li>
< li class =" footerin1">< a class =" footer" href =" About.html">关于< / a>< / li>
< / ul>
< ul>
< li class =" footerin2">< a class =" footer" href =" Help.html">帮助< / a>< / li>
< li class =" footerin2">< a class =" footer" href =" Suggestions.html">建议< / a>< / li>
< li class =" footerin2">< a class =" footer" href =" Support.html">支持< / a>< / li>
< / ul>
< ; / div>
< / body>
< / html> [/ HTML]
This is as far as I got before getting yelled at by the wife. Don''t catch divits, ie, the need to feel everything needs to be wrapped in a div.
[HTML]<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Home Page</title>
<style type="text/css">
body
{
background-color: black;
}
#wrapper{
position:relative;
overflow:auto;
}
.banner{
float:left;
width:200px;
height:650px;
}
.sponsor{
float:right;
width:200px;
height:650px;
}
.list1{
float:left;
width:30%;
margin:0 auto;
list-style-type:none;
}
a.nav{
float:left;
text-decoration:none;
color:#000;
background-color:#e00;
padding:0.2em 0.6em;
border-right: 1px solid #000;
font-size:20px;
}
</style>
</head>
<body>
<div class="main">
<div id="wrapper">
<img class="banner" src="2.png" />
<ul class="list1">
<li class="navin"><a class="nav" href="Home.html">Home</a></li>
<li class="navin"><a class="nav" href="Stories.html">Stories</a></li>
<li class="navin"><a class="nav" href="Blogs.html">Blogs</a></li>
<li class="navin"><a class="nav" href="Music.html">Music</a></li>
<li class="navin"><a class="nav" href="Videos">Video</a></li>
<li class="navin"><a class="nav" href="About.html">About</a></li>
</ul>
<img class="sponsor" src="2.png" />
<div class="contents">
<!-- 19 line breaks to extend the page -->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<ul class="list2">
<li class="footerin1"><a class="footer" href="Home.html">Home</a></li>
<li class="footerin1"><a class="footer" href="Storys.html">Storys</a></li>
<li class="footerin1"><a class="footer" href="Blogs.html">Blogs</a></li>
<li class="footerin1"><a class="footer" href="Music.html">Music</a></li>
<li class="footerin1"><a class="footer" href="Videos.html">Videos</a></li>
<li class="footerin1"><a class="footer" href="About.html">About</a></li>
</ul>
<ul>
<li class="footerin2"><a class="footer" href="Help.html">Help</a></li>
<li class="footerin2"><a class="footer" href="Suggestions.html">Suggestions</a></li>
<li class="footerin2"><a class="footer" href="Support.html">Support</a></li>
</ul>
</div>
</body>
</html>[/HTML]
这篇关于分隔导航栏，横幅，页脚，Sponsers和页面内容。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
