DIV+CSS布局问题,让两个DIV标签并排

DIV+CSS布局问题,让两个DIV标签并排而不是2行显示... DIV+CSS布局问题,让两个DIV标签并排而不是2行显示 展开
 我来答
娱乐小八卦啊a
高粉答主

2020-03-31 · 娱乐小八卦,天天都知道
娱乐小八卦啊a
采纳数:256 获赞数:117853

向TA提问 私信TA
展开全部

1、使用css float并排显示:

对div设置一个float浮动属性即可解决不并排显示,只要并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。

加float浮动实现多个div并排显示。

这里对div通设一个浮动,当然实际使用时候,要通排显示div对象的加入css类,就对要同行显示css选择器设置浮动。避免其它不需要设置的也被加入浮动样式。

2、使用css display同行显示:

加入display:inline即可解决实现同行并排显示div盒子对象。

对div标签设置div{ display:inline}样式。

扩展资料

div标签的作用:

主要应用div结构网页大小局部,架构网页框架。譬喻一张网页最外层、大结构布局、小部份布局。div内可以嵌入模式,也或许嵌入任何标签。要实现漂白的各种各样的网页,div使用必不可少,div机关框架再运用css对其设置名堂,完成千般各样刻舟求剑的网页。

div标签自身是不有任何效用的标签,也不是特殊标签。一样平常组织经常运用DIV作为主要的构造标签,再配合其他标签的应用达到结构需求,而另外标签各有各机能与作用。

div自身就作为DIV CSS构造的首要标签(div构造大小结构,架构大小框架、嵌套嵌入形式或其他标签,应用其他标签大面积构造大小结构 大小框架不切当),所以要应用div标签构造html。

博学小赵爱生活
高能答主

2019-10-29 · 专注于食品生活科技行业
博学小赵爱生活
采纳数:456 获赞数:111882

向TA提问 私信TA
展开全部

假设 apDiv1是外面的层,apDiv2,apDiv3是里面的,给apDiv2,apDiv3 设置浮动为左就可以了,还有当apDiv2的宽度加上apDiv3的宽度大于apDiv1的宽度是,apDiv3会跑到apDiv2下面,这时可以改它们的宽度。

#apDiv1 {

position:absolute;

left:21px;

top:14px;

width:585px;

height:282px;

z-index:1;

background-color: #0000FF;

}

#apDiv2 {

float:left;

width:242px;

height:98px;

z-index:2;

background-color: #993300;

}

#apDiv3 {

float:left;

width:254px;

height:113px;

z-index:3;

background-color: #CCCC00;

}

或者。

<style>

#left,#right {float:left;border:1px solid red; padding:10px;}

</style>

<div id= "main ">

<div id= "left "> 1111 </div>

<div id= "right "> 2222

2222

2222 </div>

<!-- 如果不用clear属性可能会浏览器不兼容问题。 -->

<div style="clear:both"></div>

</div>

扩展资料:

布局知识:

DIV+CSS布局,CSS布局是网页html通过div标签+css样式表代码开发制作的(html)网页的统称。

div+css布局好处:便于维护,有利seo(谷歌将网页打开速度作为排名因素及SEO因素),网页打开速度更快,符合web标准等。

IE中两个层之间的间隙(IE 3px bug)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>YourHomePage.com.cn</title>

<style type="text/css">

<!--

#left {

float:left;

width:200px;

height:100px;

background:#f00;

}

#right {

width:200px;

height:100px;

background:#fc0;

}
-->

</style>

</head>

<body>

<div id="left">YourHomePage.com.cn</div>

<div id="right">YourHomePage.com.cn</div>

</body>

</html>

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
黑眼圈
2017-10-14 · TA获得超过723个赞
知道小有建树答主
回答量:411
采纳率:71%
帮助的人:91.1万
展开全部

方法一:让div块分别左右浮动

方法二:一个浮动,另一个只要放的下,自动跟随;

两种方式都能实现并排,代码如下

div{float:left;}

不懂得追问,希望采纳我

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
xiewei430
推荐于2018-02-28 · TA获得超过144个赞
知道答主
回答量:119
采纳率:0%
帮助的人:49.1万
展开全部
首先要在外面包一个大的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>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
散散
2012-07-23 · TA获得超过5045个赞
知道小有建树答主
回答量:2224
采纳率:66%
帮助的人:1549万
展开全部
float:left; display:inline;
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式