CSS让2个DIV在同一行显示的解决方法
阅读数:112 评论数:0
跳转到新版页面分类
html/css/js
正文
在CSS中,div属于块级元素,每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。所以默认情况下,2个div是无法显示在同一行的,必须通过样式属性去修改。
解决方方法1:display:inline,将其变成行级元素,这样2个div就会排在同一行。
<div style="width:400px;height:300px;?border-width:1px;border-style:solid;border-color:#FFDEAD;">
<div style="background-color:#6495ED;width:100px;height:100px;display:inline;"></div>
<div style="background-color:#C0FF3E;width:100px;height:100px;display:inline;"></div>
<div style="background-color:#8A2BE2;width:100px;height:100px;display:inline;"></div>
</div>
解决方法2:使用float
<div style="width:700px;height:500px;?border-width:1px;border-style:solid;border-color:#FFDEAD;">
<div style="background-color:#6495ED;width:100px;height:100px;float:left;"></div>
<div style="background-color:#C0FF3E;width:100px;height:100px;float:left;"></div>
<div style="background-color:#C0FF3E;width:100px;height:100px;float:right;"></div>
<!--必须清除浮动,才能换行-->
<div style="background-color:#8A2BE2;width:100px;height:100px;clear:both;"></div>
</div>
使用inline,2个div之间默认是有缝隙的,不会刚好贴在一起;使用float,会影响后续的div,必须通过clear清除
相关推荐
一、概述
overflow属性用于当一个元素太大而无法适应父级窗口的大小时行为。具体又可以分为:
overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
over
一、概述
background是css简写属性,可有一个或多个值,且可以按任意顺序放置:
background:
<bg-color>
<bg-image>
<position/bg-size>
Less是一个CSS的超集,Less允许我们定义变量,使用嵌套式声明,定义函数等。严格说Less包含两部分:(1)Less的语法 (2)Less预处理器。浏览器终究只认识CSS,所以Less文件
一、概述
CSS3中新增的一个函数,calculate(计算)的缩写。用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】