CSS實現簡單的橫向排列demo
來源:互聯網
上載者:User
css <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>
<span class=sp>
<font class=sw>width:99.8%;</font>
<font>這總寬有97%</font>
<font>每格32.9=</font>
<font>我們可以案比例</font>
<font>只要增加</font>
<font>< font >內容< /font ></font>
<font>就可以了</font>
<font face=webdings color=ctme>$</font>
<font face=webdings>3</font>
<font face=webdings>4</font>
<font face=webdings>5</font>
<font face=webdings>6</font>
<font face=webdings>7</font>
<font face=webdings>8</font>
<font face=webdings>9</font>
<font face=webdings>:</font>
<font face=webdings>;</font>
<font face=webdings><</font>
<font face=webdings>=</font>
<font class=sw>這裡就做一個有分類的</font>
<a href=網址>變成連結了也是一樣哦</a>
<font>1</font>
<font>2</font>
<font>3</font>
<font>4</font>
<font>5</font>
<font>6</font>
<font>7</font>
<font>8</font>
<font>9</font>
<font color=peru>俊~~</font>
<font color=red>abc</font>
<font color=blue>新主題就放在最上</font>
</span>
<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>
<span class="table">
<span class="row">
不管你生下幾個牌子 他們總是自己排好的!<br>
如果你要排四個 然後在 width有100%之下他們是每個25%<br>
如果你要3格 就要在31%或32%裡 請不要變成他的高於!他四周圍要有空隙 可把margin的數變成margin:2; <br>
在.cell{裡width:30%;都是要以100%來放置
</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
<span class="cell">主題</span>
</span>
</span>
注意外部空隙是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>
<center>
<div class="user">
<p>A</p>
<a href="">歌手</a>
<a href="">歌手</a>
<a href="">歌手</a>
<a href="">歌手</a>
<a href="">歌手</a>
<a href="">歌手</a>
<a href="">歌手</a>
<a href="">歌手</a>
<p>B</p>
<a href="">歌手</a>
<a href="">歌手</a>
<p>C</p>
<a href="">歌手</a>
<a href="">歌手</a>
<a href="">歌手</a>
<a href="">歌手</a>
<a href="">歌手</a>
<a href="">歌手</a>
</div>