css 横排 实现代码

当前位置 : 首页 > 网页制作 > CSS > css 横排 实现代码

css 横排 实现代码

来源: 作者: 时间:2015-12-07 14:04
效果预览:css: [code]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:#99
效果预览:   css: [code] <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:#99

效果预览:

 
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>

Tag:
网友评论

<