CSS实现简单的横向排列demo

王朝html/css/js·作者佚名 2008-05-19

<STYLE>

.sp{ width:97%;font-family: Tahoma, Verdana;}

.sp font, .sp a, .sp a:visited{width:24.5%;padding:3px;margin-bottom:3;text-align:center;border:1px ridge #8099FF;background-color:#BFD9FF;text-decoration: none;}

.sp a{color:#006699;}

.sp a:hover{ color:red;background:#efefef;}

.sp font.sw { color:#fff;width:99.8%;background-color:#007ACC;font-weight:bold;}

</STYLE>

width:99.8%;

这总宽有97%

每格32.9=

我们可以案比例

只要增加

内容

就可以了

$

3

4

5

6

7

8

9

:

;

<

=

这里就做一个有分类的

<a href=网址>变成连结了也是一样哦</a>

1

2

3

4

5

6

7

8

9

俊~~

abc

新主题就放在最上

<style>

.table

{

width:80%;

}

.row

{

margin-bottom:1em;

padding: 2px;

width:100%;

background-color:#BFD9FF;

height:90px;

border:1px solid #8099FF;

}

.cell

{ clear:left;

width:32.8%;

padding:4px;

margin-bottom:3;

border:1px ridge #8099FF;

background-color:#BFD9FF;

}

</style>

不管你生下几个牌子他们总是自己排好的!<

br>

如果你要排四个然后在 width有100%之下他们是每个25%<

br>

如果你要3格就要在31%或32%里请不要变成他的高于!他四周围要有空隙可把margin的数变成margin:2; <

br>

在.cell{里width:30%;都是要以100%来放置

主题

注意外部空隙是margin:2 0;

左右已有预定的了所以变成2px 0 你在2px后面没加上0 那等于左右多加2px变成4px了

user为总宽度有90%排排站我们都要以100%来计算

歌手一行排4个24.5%包括空隙刚好排3个32.7%或32.9%;空隙刚好

在歌手(主题)有大量的时 a与a:hover尽量不要用有底色不然速度会有甘扰<

BR>

<style>

.user

{

width:90%;

text-align:left;

}

.user a

{width:32.9%;

margin:2 0;

padding-top:4px;

padding: 3px;

border:1px solid #bbb;

TEXT-DECORATION: none;

}

.user a:link, .user a:visited, .user a:active

{

color:#4b4b4b;

background-color:ffe;

}

.user a:hover

{

color:#EF520F;

background-color:f2f2f2;

}

.user p

{text-indent:24px;

font:175%/1.1em Georgia,Serif;

margin:0px;

color:blue;

}

</style>

A

B

C

</div>