请教高手关于DIV+CSS布局的问题
CSS代码如下：#body{margin:0auto;text-align:center;}#header{MARGIN:0;BORDER:0px;BACKGROUND:...
CSS代码如下：
#body{
margin:0 auto;
text-align:center;
}
#header{
MARGIN: 0 ;
BORDER: 0px;
BACKGROUND: #CC0000;
WIDTH: 800px;
HEIGHT: 150px;
}
#logo{
width:800px;
height:100px;
}
#banner{
width:800px;
height:50px;
background:#00CCCC;
}
#mainbox {
MARGIN: 0 auto;
WIDTH: 800px;
height:1500px;
BACKGROUND: #009933;
}
#menu {
FLOAT: right;
MARGIN: 0;
PADDING:0;
float:left;
WIDTH: 600px;
height:50px;
BACKGROUND: #33CCFF;
float:left;
}
#menu ul {
CLEAR: left;
MARGIN: 0px;
PADDING:0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY:inline;
}
#menu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center
}
#menu li a {
DISPLAY: block;
PADDING:0;
BACKGROUND: url(images/1.gif) transparent no-repeat 8px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #FF00FF;
TEXT-DECORATION: none;
}
#menu li a:hover {
BACKGROUND: url(2.gif) #C61C18 no-repeat 8px 8px;
COLOR: #ADFF2F;
}
.style{
WIDTH: 200px;
height:50px;
font-size:45px;
}
#check{
width:200px;
float:right;
height:50px;
background:#FF33FF;
}
#left{
display:block;
MARGIN: 0;
PADDING: 0px;
BACKGROUND: #FFFF00;
WIDTH: 200px;
height:1500px;
}
#right{
display:block;
float:right;
MARGIN: 0;
PADDING:0px;
WIDTH: 600px;
height:1500px;
BACKGROUND: #E0EFDE;
}
#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 100px;
WIDTH: 800px;
}
HTML代码如下：
<html>
<head>
<title>adgaf</title>
<link href="style.css" rel="stylesheet" type="text/css" rev="stylesheet" />
</head>
<body>
<div id="body">
<div id="header">
<div id="logo">这里是文档头图片</div>
<div id="banner">这里是广告区</div>
</div>
<div id="mainbox">
<div>
<div id="menu">
<ul>
<li class="style"><a title="" href="#">首页</a></li>
<li class="style"><a title="" href="#">工具</a></li>
<li class="style"><a title="" href="#">声明</a></li>
</ul>
</div>
<div id="check">这里是搜索栏</div>
</div>
<div>
<div id="left">这里是文档的左边</div>
<div id="right">这里是文档的右边</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
但是网页出现一个问题left和right不在同一行显示,请教一下，怎样进行修改。
说白了，我就是想知道FLOAT, CLEAR, POSITION, DISPLAY的使用方法！谢谢了，我要详细的讲解！先加10分，后加加50分 展开
#body{
margin:0 auto;
text-align:center;
}
#header{
MARGIN: 0 ;
BORDER: 0px;
BACKGROUND: #CC0000;
WIDTH: 800px;
HEIGHT: 150px;
}
#logo{
width:800px;
height:100px;
}
#banner{
width:800px;
height:50px;
background:#00CCCC;
}
#mainbox {
MARGIN: 0 auto;
WIDTH: 800px;
height:1500px;
BACKGROUND: #009933;
}
#menu {
FLOAT: right;
MARGIN: 0;
PADDING:0;
float:left;
WIDTH: 600px;
height:50px;
BACKGROUND: #33CCFF;
float:left;
}
#menu ul {
CLEAR: left;
MARGIN: 0px;
PADDING:0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY:inline;
}
#menu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center
}
#menu li a {
DISPLAY: block;
PADDING:0;
BACKGROUND: url(images/1.gif) transparent no-repeat 8px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #FF00FF;
TEXT-DECORATION: none;
}
#menu li a:hover {
BACKGROUND: url(2.gif) #C61C18 no-repeat 8px 8px;
COLOR: #ADFF2F;
}
.style{
WIDTH: 200px;
height:50px;
font-size:45px;
}
#check{
width:200px;
float:right;
height:50px;
background:#FF33FF;
}
#left{
display:block;
MARGIN: 0;
PADDING: 0px;
BACKGROUND: #FFFF00;
WIDTH: 200px;
height:1500px;
}
#right{
display:block;
float:right;
MARGIN: 0;
PADDING:0px;
WIDTH: 600px;
height:1500px;
BACKGROUND: #E0EFDE;
}
#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 100px;
WIDTH: 800px;
}
HTML代码如下：
<html>
<head>
<title>adgaf</title>
<link href="style.css" rel="stylesheet" type="text/css" rev="stylesheet" />
</head>
<body>
<div id="body">
<div id="header">
<div id="logo">这里是文档头图片</div>
<div id="banner">这里是广告区</div>
</div>
<div id="mainbox">
<div>
<div id="menu">
<ul>
<li class="style"><a title="" href="#">首页</a></li>
<li class="style"><a title="" href="#">工具</a></li>
<li class="style"><a title="" href="#">声明</a></li>
</ul>
</div>
<div id="check">这里是搜索栏</div>
</div>
<div>
<div id="left">这里是文档的左边</div>
<div id="right">这里是文档的右边</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
但是网页出现一个问题left和right不在同一行显示,请教一下，怎样进行修改。
说白了，我就是想知道FLOAT, CLEAR, POSITION, DISPLAY的使用方法！谢谢了，我要详细的讲解！先加10分，后加加50分 展开
4个回答
展开全部
我来告诉你详细的修改方式
首先你的left 和 right需要定义float:left
<div>
<div id="left">这里是文档的左边</div>
<div id="right">这里是文档的右边</div>
</div>
还有你left 和 right的父一级层，必须指定宽度，这两个解决就OK了，IE7下测试无问题。
以下是我修改后的代码：
<html>
<head>
<title>adgaf</title>
<style type="text/css">
<!--
#body{
margin:0 auto;
text-align:center;
}
#header{
MARGIN: 0 ;
BORDER: 0px;
BACKGROUND: #CC0000;
WIDTH: 800px;
HEIGHT: 150px;
}
#logo{
width:800px;
height:100px;
}
#banner{
width:800px;
height:50px;
background:#00CCCC;
}
#mainbox {
MARGIN: 0 auto;
WIDTH: 800px;
height:1500px;
BACKGROUND: #009933;
}
#menu {
FLOAT: right;
MARGIN: 0;
PADDING:0;
float:left;
WIDTH: 600px;
height:50px;
BACKGROUND: #33CCFF;
float:left;
}
#menu ul {
CLEAR: left;
MARGIN: 0px;
PADDING:0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY:inline;
}
#menu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center
}
#menu li a {
DISPLAY: block;
PADDING:0;
BACKGROUND: url(images/1.gif) transparent no-repeat 8px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #FF00FF;
TEXT-DECORATION: none;
}
#menu li a:hover {
BACKGROUND: url(2.gif) #C61C18 no-repeat 8px 8px;
COLOR: #ADFF2F;
}
.style{
WIDTH: 200px;
height:50px;
font-size:45px;
}
#check{
width:200px;
float:right;
height:50px;
background:#FF33FF;
}
#left{
display:block;
MARGIN: 0;
PADDING: 0px;
BACKGROUND: #FFFF00;
WIDTH: 200px;
height:1500px;
float:left;
}
#right{
display:block;
float:left;
MARGIN: 0;
PADDING:0px;
WIDTH: 600px;
height:1500px;
BACKGROUND: #E0EFDE;
}
#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 100px;
WIDTH: 800px;
}
-->
</style>
</head>
<body>
<div id="body">
<div id="header">
<div id="logo">这里是文档头图片</div>
<div id="banner">这里是广告区</div>
</div>
<div id="mainbox">
<div>
<div id="menu">
<ul>
<li class="style"><a title="" href="#">首页</a></li>
<li class="style"><a title="" href="#">工具</a></li>
<li class="style"><a title="" href="#">声明</a></li>
</ul>
</div>
<div id="check">这里是搜索栏</div>
</div>
<div style="width:800px">
<div id="left">这里是文档的左边</div>
<div id="right">这里是文档的右边</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
首先你的left 和 right需要定义float:left
<div>
<div id="left">这里是文档的左边</div>
<div id="right">这里是文档的右边</div>
</div>
还有你left 和 right的父一级层，必须指定宽度，这两个解决就OK了，IE7下测试无问题。
以下是我修改后的代码：
<html>
<head>
<title>adgaf</title>
<style type="text/css">
<!--
#body{
margin:0 auto;
text-align:center;
}
#header{
MARGIN: 0 ;
BORDER: 0px;
BACKGROUND: #CC0000;
WIDTH: 800px;
HEIGHT: 150px;
}
#logo{
width:800px;
height:100px;
}
#banner{
width:800px;
height:50px;
background:#00CCCC;
}
#mainbox {
MARGIN: 0 auto;
WIDTH: 800px;
height:1500px;
BACKGROUND: #009933;
}
#menu {
FLOAT: right;
MARGIN: 0;
PADDING:0;
float:left;
WIDTH: 600px;
height:50px;
BACKGROUND: #33CCFF;
float:left;
}
#menu ul {
CLEAR: left;
MARGIN: 0px;
PADDING:0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY:inline;
}
#menu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center
}
#menu li a {
DISPLAY: block;
PADDING:0;
BACKGROUND: url(images/1.gif) transparent no-repeat 8px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #FF00FF;
TEXT-DECORATION: none;
}
#menu li a:hover {
BACKGROUND: url(2.gif) #C61C18 no-repeat 8px 8px;
COLOR: #ADFF2F;
}
.style{
WIDTH: 200px;
height:50px;
font-size:45px;
}
#check{
width:200px;
float:right;
height:50px;
background:#FF33FF;
}
#left{
display:block;
MARGIN: 0;
PADDING: 0px;
BACKGROUND: #FFFF00;
WIDTH: 200px;
height:1500px;
float:left;
}
#right{
display:block;
float:left;
MARGIN: 0;
PADDING:0px;
WIDTH: 600px;
height:1500px;
BACKGROUND: #E0EFDE;
}
#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 100px;
WIDTH: 800px;
}
-->
</style>
</head>
<body>
<div id="body">
<div id="header">
<div id="logo">这里是文档头图片</div>
<div id="banner">这里是广告区</div>
</div>
<div id="mainbox">
<div>
<div id="menu">
<ul>
<li class="style"><a title="" href="#">首页</a></li>
<li class="style"><a title="" href="#">工具</a></li>
<li class="style"><a title="" href="#">声明</a></li>
</ul>
</div>
<div id="check">这里是搜索栏</div>
</div>
<div style="width:800px">
<div id="left">这里是文档的左边</div>
<div id="right">这里是文档的右边</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
FLOAT 和position 都是用来定位的
float有三歌属性 分别为left right none 如果你设置了float:left的话，那么他的意思就是向其父元素的左侧靠紧。（注意是它的父元素）
position主要是用来设置绝对定位和相对定位的。它的属性有static absolute
relative fixed 主要用到的是absolute（绝对定位） relative（相对定位） 当你设置了position:absolute 时，那么它在对齐是就不是对齐到它的父块了，而是相对body来对齐的了，反之relative则是相对于父块进行对齐的。 这里要好好理解一下，很重要的。
clear
它是用来清除浮动的 比如clear:both 就是说清除两边的浮动的。当你两边都有DIV块时而且吧你想要显示出来的块给遮住了，你可以使用它来显示的。
display 有两个属性 inline block
display: block 表示为垂直排列 让其显示。
其实你可以在百度里搜索一下，答案更加的详细 而且还有相应的例子。
希望对你有帮助
float有三歌属性 分别为left right none 如果你设置了float:left的话，那么他的意思就是向其父元素的左侧靠紧。（注意是它的父元素）
position主要是用来设置绝对定位和相对定位的。它的属性有static absolute
relative fixed 主要用到的是absolute（绝对定位） relative（相对定位） 当你设置了position:absolute 时，那么它在对齐是就不是对齐到它的父块了，而是相对body来对齐的了，反之relative则是相对于父块进行对齐的。 这里要好好理解一下，很重要的。
clear
它是用来清除浮动的 比如clear:both 就是说清除两边的浮动的。当你两边都有DIV块时而且吧你想要显示出来的块给遮住了，你可以使用它来显示的。
display 有两个属性 inline block
display: block 表示为垂直排列 让其显示。
其实你可以在百度里搜索一下，答案更加的详细 而且还有相应的例子。
希望对你有帮助
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
其实这里并不需要在LEFT里面写display:block,然后你在他们俩下面加一个类你的类可以写成<div class="clear"></div>这样就可以清除了,样式是.clear{clear:both;font-size:0;height:0;overflow:0}你在试试
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你在#left里面加一个：float:left;就能在同一行显示了啊
在定义#right的时候你用了右浮动，相对于也得用左浮动的
在定义#right的时候你用了右浮动，相对于也得用左浮动的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
