CSS+DIV布局，如何让多个DIV水平放置？
先放上我的外部CSS文件代码：body{margin:0px;/*外边距为0*/padding:0px;/*内边距为0*/font:12pxArial,宋体;text-a...
先放上我的外部CSS文件代码：
body{
margin:0px; /*外边距为0*/
padding:0px; /*内边距为0*/
font:12px Arial,宋体;
text-align:center; /*在IE里页面居中*/
}
#Container{ /*容器*/
margin-left:auto; /*让其居中显示*/
margin-right:auto;
width:980px; /*网站宽度 980*/
height:800px;
text-align:left;
}
#ALL_Head{
height:30px;
}
/*LOGO行内容*/
#All_A{
width:980px;
float:left;
background:#930;
height: 75px;
}
#All_A #1_Logo_left{
width:30px;
height:75px;
float:left;
}
#All_A #2_Logo{
width:163px;
height:75px;
float:left;
}
#All_A #3_Nav_Home{
width:102px;
height:75px;
float:left;
}
#All_A #4_Nav_About{
width:121px;
height:75px;
float:left;
}
#All_A #5_Nav_Contact{
width:132px;
height:75px;
float:left;
}
#All_A #6_Nav_Join{
width:106px;
height:75px;
float:left;
}
#All_A #7_Nav_right{
width:285px;
height:75px;
float:left;
}
——————
然后是.ASP里面的代码
<body>
<div id="ALL_Head">
</div>
<div id="Container">
<div id="All_A">
<div id="1_Logo_left"><img src="Strupic/Home/1.gif" width="30" height="75" />
</div>
<div id="2_Logo"><img src="Strupic/Home/2.gif" width="163" height="75" />
</div>
<div id="3_Nav_Home"><img src="Strupic/Home/3.gif" width="102" height="75" />
</div>
<div id="4_Nav_About"><img src="Strupic/Home/4.gif" width="121" height="75" />
</div>
<div id="5_Nav_Contact"><img src="Strupic/Home/5.gif" width="132" height="75" />
</div>
<div id="6_Nav_Join"><img src="Strupic/Home/6.gif" width="106" height="75" />
</div>
<div id="7_Nav_right"><img src="Strupic/Home/7.gif" width="285" height="75" />
</div>
<div style="clear:both"></div>
</div>
</body>
——————
我想让这7个DIV块都放在一行，但是就是没办法，我float:left也都用了呀，郁闷。着急啊！！！ 展开
body{
margin:0px; /*外边距为0*/
padding:0px; /*内边距为0*/
font:12px Arial,宋体;
text-align:center; /*在IE里页面居中*/
}
#Container{ /*容器*/
margin-left:auto; /*让其居中显示*/
margin-right:auto;
width:980px; /*网站宽度 980*/
height:800px;
text-align:left;
}
#ALL_Head{
height:30px;
}
/*LOGO行内容*/
#All_A{
width:980px;
float:left;
background:#930;
height: 75px;
}
#All_A #1_Logo_left{
width:30px;
height:75px;
float:left;
}
#All_A #2_Logo{
width:163px;
height:75px;
float:left;
}
#All_A #3_Nav_Home{
width:102px;
height:75px;
float:left;
}
#All_A #4_Nav_About{
width:121px;
height:75px;
float:left;
}
#All_A #5_Nav_Contact{
width:132px;
height:75px;
float:left;
}
#All_A #6_Nav_Join{
width:106px;
height:75px;
float:left;
}
#All_A #7_Nav_right{
width:285px;
height:75px;
float:left;
}
——————
然后是.ASP里面的代码
<body>
<div id="ALL_Head">
</div>
<div id="Container">
<div id="All_A">
<div id="1_Logo_left"><img src="Strupic/Home/1.gif" width="30" height="75" />
</div>
<div id="2_Logo"><img src="Strupic/Home/2.gif" width="163" height="75" />
</div>
<div id="3_Nav_Home"><img src="Strupic/Home/3.gif" width="102" height="75" />
</div>
<div id="4_Nav_About"><img src="Strupic/Home/4.gif" width="121" height="75" />
</div>
<div id="5_Nav_Contact"><img src="Strupic/Home/5.gif" width="132" height="75" />
</div>
<div id="6_Nav_Join"><img src="Strupic/Home/6.gif" width="106" height="75" />
</div>
<div id="7_Nav_right"><img src="Strupic/Home/7.gif" width="285" height="75" />
</div>
<div style="clear:both"></div>
</div>
</body>
——————
我想让这7个DIV块都放在一行，但是就是没办法，我float:left也都用了呀，郁闷。着急啊！！！ 展开
6个回答
展开全部
通过设置display样式为table-cell。
1、定义div的css
<style>
div{
display:table-cell
}
</style>
2、定义水平div
<body>
<div>1</div><div>2</div><div>3</div>
</body>
补充：
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
...你那7个div里面都是图片，有必要加div吗？把 7张图片的DIV 都去掉，直接给 图片 定义class;
如果 7个div 里面是别的内容 ，把我的代码 复制走；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
*{margin:0; padding:0;}
.one, .two, .three, .four, .five, .six, .seven{float:left; display:block; width:50px; color:#fff;}
.one{background:#CCCCCC; }
.two{background:#FF0000; }
.three{background:#00FF00; }
.four{background:#0000FF; }
.five{background:#FFFF00; }
.six{background:#00FFFF;}
.seven{background:#000000;}
</style>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
<div class="six">six</div>
<div class="seven">seven</div>
</body>
</html>
如果 7个div 里面是别的内容 ，把我的代码 复制走；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
*{margin:0; padding:0;}
.one, .two, .three, .four, .five, .six, .seven{float:left; display:block; width:50px; color:#fff;}
.one{background:#CCCCCC; }
.two{background:#FF0000; }
.three{background:#00FF00; }
.four{background:#0000FF; }
.five{background:#FFFF00; }
.six{background:#00FFFF;}
.seven{background:#000000;}
</style>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
<div class="six">six</div>
<div class="seven">seven</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
加上FLoath
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用DW放正了再删废代码呗。
追问
在DW4里面是显示正确的。但是放在浏览器里就都显示在竖排了。。
追答
换个浏览器试试呢？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
晕了 哥们 你应该看下div的命名规则 好不？
不知道不能用数字打头命名吗？？？
1_sdflkkasdfk 这种的不可以！~
你换个名就好了！~
不知道不能用数字打头命名吗？？？
1_sdflkkasdfk 这种的不可以！~
你换个名就好了！~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
