分享
 
 
 

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>

<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>&#36;</font>

<font face=webdings>&#51;</font>

<font face=webdings>&#52;</font>

<font face=webdings>&#53;</font>

<font face=webdings>&#54;</font>

<font face=webdings>&#55;</font>

<font face=webdings>&#56;</font>

<font face=webdings>&#57;</font>

<font face=webdings>&#58;</font>

<font face=webdings>&#59;</font>

<font face=webdings>&#60;</font>

<font face=webdings>&#61;</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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有