CSS+DIV布局，如何让多个DIV水平放置？

先放上我的外部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>

翻翻过去那场雪

浏览 3145回答 3

3回答

噜噜哒

通过设置display样式为table-cell。1、定义div的css12345<style>div{  display:table-cell}</style>2、定义水平div123<body>  <div>1</div><div>2</div><div>3</div></body>补充：display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性。

aluckdog

首先要在外面包一个大的DIV ，然后里面的2个小DIV 设置这样的样式 float:left; 其中left可以改成 right或者什么的，当然打的DIV要清除里面的浮动，我写个例子<div id="da" style="width:300px; height:50px; overflow:hidden;"><div id="xiao1" style="width:100px; height:50px; float:left; background:#f00;"><div id="xiao2" style="width:100px; height:50px; float:left; background:#f60;"></div>

随时随地看视频慕课网APP