如何实现CSS样式之多个层DIV并排布局
如何实现CSS样式之多个层DIV并排布局?对于初会CSS的朋友,这个也有点难度,不知道是如何下手去写CSS,其实,这个也容易实现,所以,我便做了一下实例,分享给大家;
让我们来做盒子模拟分析吧；四个层并排，那么外面还得加一个层，把这个四个层都放在一个盒子里，于是如图示：
CSS+DIV，其实就是盒子模拟；四个绿框，便是四个并排的DIV层，外面是一个盒子层，把四个层包起来，看图我们可以看到，在这里，四个并排DIV层，里面再套了，两个层；那么下面我便分享一下代码，多指教；LOOK;
CSS代码如下：
#bottom {
margin:5 auto;/*下边居是0 */
width:1002px;
height:150px;
padding:5px;
margin-left:140px;
}
#bottom div {
width:244px;
height:150px;
border:#12B81B solid 0px;
margin:2px;
overflow:hidden;
}
#himg{
background-image:url(images/services.jpg);
width:240px !important;
height:30px !important;
margin:0px;
padding:0px;
float:left;
}
#himg H3{
margin-top:5px;
}
#himg a:link{
color:#666666;
text-decoration:none;
}
#himg a:hover{
color:#06b6ff;
text-decoration:none;
}
#himg a:visited{
color:#06b6ff;
text-decoration:none;
}
#texts{
width:auto;
height:120px;
padding:5px;
background:url(images/tebg.png);
background-repeat:no-repeat;
text-align:left;
}
#texts p{
width:225px;
margin-top:5px;
}
#d1 {
float:left;
}
#d2 {
float:left;
}
#d3 {
float:left;
}
#d4 {
float:left;
}
如上面所示CSS代码，下面是源码：
第一层
第一层
第二层
第二层
第三层
第三层
第四层
第四层
我给出了效果图示：
可以看到图示效果；四个层并列成一排，层内分上下两个部分，显示很有分层感； 这便是如何实现多个层DIV并排一行的方法之一；CSS 如何实现多个DIV盒子并排一行显示，就是这么简单；