为了账号安全,请及时绑定邮箱和手机立即绑定

CSS+DIV布局,如何让多个DIV水平放置?

CSS+DIV布局,如何让多个DIV水平放置?

翻翻过去那场雪 2019-03-08 11:07:52
先放上我的外部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>
查看完整描述

3 回答

?
噜噜哒

TA贡献1784条经验 获得超7个赞

通过设置display样式为table-cell。

1、定义div的css

12345<style>div{  display:table-cell}</style>

2、定义水平div

123<body>  <div>1</div><div>2</div><div>3</div></body>

补充:

display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性。



查看完整回答
反对 回复 2019-04-02
?
aluckdog

TA贡献1847条经验 获得超7个赞

首先要在外面包一个大的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>

查看完整回答
反对 回复 2019-04-02
  • 3 回答
  • 0 关注
  • 3095 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信