繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css 横排 实现代码
- CSS样式表
- CSS:提高网页在浏览器的渲染速度
- css网页制作实用技巧9则
- 思考Web站点设计对类以及id的命名方式
- CSS教程:关于网页图片的属性
- CSS教程:元素层叠级别及z-index
- div css在思路和流程上实现结构与表现的分离
- CSS入门教程:网页首字下沉
- IE6、IE7和FF的最简单的hack技巧
- 跨浏览器实现float:center
- css技巧:经典CSS使用技巧几则
- CSS教程:legend标签设定宽度
- 网站进行W3C XHTML1.0验证的经验
- CSS教程：网页颜色的几种表示
- 网页CSS背景图片使用的测试结果
- CSS网页布局:网页页面结构化
- SPAN和DIV,Class与ID的区别汇总
- xhtml css网页制作中问题解决的方式
- div css与xhtml css是什么意思?
- CSS样式表优化更整洁而简短
- CSS设计网站导航菜单的优势
CSS样式表 中的 css 横排 实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 123 ::
收藏到网摘: n/a
效果预览:
css:
代码如下:
<style type="text/css">
<!--
.table_tile{
text-align:left;
height: 20px;
width: 25%;
float: left;
}
.table_tile_{
text-align:right;
background-color:#0000FF;
height: 20px;
background-color:#999966;
width: 25%;
float: left;
}
.table_tile_bottom{
text-align:left;
background-color:#FFF000;
height: 20px;
width: 25%;
float: left;
}
-->
</style>
html:
代码如下:
<div class="table_tr">
<div class="table_tile">top0</div>
<div class="table_tile_">top1</div>
<div class="table_tile">top2</div>
<div class="table_tile">top3</div>
</div>
<div class="table_tr">
<div class="table_tile_bottom">bottom0</div>
<div class="table_tile_bottom">bottom1</div>
<div class="table_tile_bottom">bottom2</div>
<div class="table_tile_bottom">bottom3</div>
</div>
或者来个更简单的:
代码如下:
<style>
.float_left{
text-align:left;
height: 20px;
width: 25%;
float: left;
}
</style>
<div class = "float_left">asdasd</div>
<div class = "float_left">asdasd</div>
<div class = "float_left">why</div>
评论 (0) All
