如何实现css横排效果

2019-09-02 09:44:48来源:爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

如何实现css横排效果?本文将为大家介绍实现css横排效果的内容,如果你还不知道css横排的实现代码就跟小编一起去学习相关内容吧,希望对你有所帮助。

效果预览:

image?
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>

如何实现css横排效果?看完本文后你是否都学会了呢?只要我们多加练习,相信就会把css掌握的更好,也会更加容易去实现一些特殊效果。


原文链接:https://js.aizhan.com/web_authoring/css/8640.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:利用Web Developer插件制作网页的教程

下一篇:带你学习css组合与CSS嵌套