CSS让2个DIV在同一行显示的解决方法
2015-01-16 13:26
447 查看
在CSS中,div属于块级元素,每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。所以默认情况下,2个div是无法显示在同一行的,必须通过样式属性去修改。
解决方方法1:display:inline,将其变成行级元素,这样2个div就会排在同一行。
解决方法2:使用float
使用inline,2个div之间默认是有缝隙的,不会刚好贴在一起;使用float,会影响后续的div,必须通过clear清除。
解决方方法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清除。
相关文章推荐
- div+css div不设置高度背景颜色或外边框不能显示的解决方法
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)
- CSS:多个DIV在同一行居中显示的一种实现方法
- div+css总结—FF下div不设置高度背景颜色或外边框不能显示的解决方法
- div+css总结—FF、IE7下div不设置高度背景颜色或外边框不能显示的解决方法
- CSS:多个DIV在同一行居中显示的一种实现方法
- div+css总结—FF下div不设置高度背景颜色或外边框不能显示的解决方法 (新浪博客 )
- li中的图片和文字不对齐div+css,解决方法
- IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决方法
- 图片IMG与容器下边界有空隙的解决方法-Div+CSS教程
- 在firefox与IE下DIV+CSS Padding效果不同的解决方法
- css控制div显示/隐藏方法及2种方法比较原码[转]
- div+css浏览器兼容问题解决方法
- DIV居中,火狐下无法正常显示解决方法
- css控制div显示/隐藏方法及2种方法比较原码
- 关于CSS中内层使用float导致外层的背景无法显示的问题的解决方法
- Div + CSS高度自适应解决方法
- 使用Form验证,未登录时登录页面无法显示图片、css、js文件的解决方法
- 在做CRM界面的时候遇到的DIV滚动条自动显示的问题!!和解决方法!
- 关于CSS+DIV 开发 与各浏览器的兼容性问题..解决方法.