十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
新建一个html文件,命名为test.html,用于讲解使用CSS如何让两个div并排显示。
创新互联公司长期为上千多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为王益企业提供专业的网站制作、网站建设,王益网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
在test.html文件内,使用div标签一个模块,在div内,再使用div标签创建两个内部模块,下面将让两个内部div并排显示。
在test.html文件内,分别给每一个div设置class属性,分别为wdiv,fldiv,frdiv。
在css标签内,设置class为wdiv的div样式,定义其宽度为500px,高度为400px,背景颜色为灰色。
在css标签内,再分别设置class为fldiv和frdiv的样式,定义它们的宽度为240px,高度为350px,同时,使用float属性分别设置一个div浮动向左,另一个浮动向右,从而实现并排显示。
在浏览器打开test.html文件,查看实现的效果。
要想并列有三种写法:
浮动。float:left;要设置父元素高度或者设置overflow:hidden;否则会出现高度塌陷
定位。position:absolute;设置父元素position:relative,子元素为absolute,通过top和left调整每个子元素相对于父元素的位置
改变div模块,将并列的div设置为display:inline-block;这样每个元素都一排了
如果并列1和3用的很多,设置简单,效果明显,2这种一般情况是不会用的,设置需要调整每个元素的top和left,麻烦费事。1和3根据不同情况可以自由选择。
css如何让三个div并排展示,其实就是设置一个浮动点,让三个div靠左或者靠右浮动;
主要标签用于:float:left(靠左对齐)float:right(靠右对齐):示例如下:
1、首先打开用到的编辑工具这里用DW
2、为了方便观察,我们把三个div设置三个背景颜色来观察,设置三个div样式这里取名:div1 div2 div3 并且引用三个样式;
详解:background:#颜色;是取的三个不同的div背景颜色;给三个div设置宽度为width:300px高度height:200px;
3、展示出来的效果如图:
使多个div并列一行的方法是将div的css样式设知定为浮动方式:float:left;或者是设定为inline-block行内块元道素【ie6下设置为inline行内元素已保证兼容性】。版
前提是几个div宽度总和不能超出父元素的宽度。
div
class="d1
clearfix"
div
class="d1-1"/div
div
class="d1-2"/div
div
class="d1-3"/div
/div
css:
.d1{
width:1200px;
margin:0
auto;
overflow:hidden;}
.d1
div{
float:left;/*将块元素div设定权为左浮动*//*display:inline-block;
_display:inline;*/
width:400px;
height:150px;
background:#ccc;}