CSS+DIV怎么分列

dashan 提交于

论坛: 
css+div
用float    
 
 CSS code：
 
#leftDiv
{
  float:left;
  width:25%;
}
#middleDiv
{
  float:left;
  width:50%;
}
#rightDiv
{
  float:right;
  width:20%;
}
 
XML/HTML code
 
<div id="leftDiv">左列</div>
<div id="middleDiv">中列</div>
<div id="rightDiv">右列</div>
 
依次类推，需要多少列，都设float一样就可以了。 
 
 
如果需要换行,那需要在上面所写的
加一条  <div style="clear:both"></div>
这样
HTML code
<div id="leftDiv">左列</div>
<div id="middleDiv">中列</div>
<div id="rightDiv">右列</div>
<div style="clear:both"></div>
<div id="leftDiv">下左列</div>
<div id="middleDiv">下中列</div>
<div id="rightDiv">下右列</div>
DIV布局主要就是你得学会怎么写多个DIV并列在一起。
一般默认多个DIV是一行一行显示的
如：
<div>我是第一个DIV</div>
<div>我是第二个DIV</div>
<div>我是第三个DIV</div>
 
他们是分行显示的。如果你要让第一二个DIV在同行显示,而第三个在他们下面那行显示就这样写:
 
<style type="text/css">
.mydiv{float:left;}
.mydivclear{clear:both;}
</style>
 
<div class="mydiv">我是第一个DIV</div>
<div class="mydiv">我是第二个DIV</div>
<div class="mydivclear"></div>
<div>我是第三个DIV</div>
 
说白了就是在div标签的style里面加上float:left或right;
当不用再显示在同一行时,新建个div标签,然后在这个新div的style里面加上clear:both; 
 

 

如何实现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 id="bottom">

<div id="d1"><div id="himg"><a href="/"><H3>第一层</H3></a></div><div id="texts"><P><span>第一层</span></P></div& gt;</div>

<div id="d2"><div id="himg"><a href="/"><H3>第二层</H3></a></div><div id="texts"><P><span>第二层</span></P></div& gt;</div>

<div id="d3"><div id="himg"><a href="/"><H3>第三层</H3></a></div><div id="texts"><P><span>第三层</span></P></div& gt;</div>

<div id="d4"><div id="himg"><a href="/"><H3>第四层</H3></a></div><div id="texts"><P><span>第四层</span></P></div& gt;</div>

我给出了效果图示：

可以看到图示效果；四个层并列成一排，层内分上下两个部分，显示很有分层感； 这便是如何实现多个层DIV并排一行的方法之一；CSS 如何实现多个DIV盒子并排一行显示，就是这么简单；