零基础建站培训介绍

当前位置:

CSS教程7:CSS如何控制DIV横排显示

以下为学做网站论坛关于“CSS教程7:CSS如何控制DIV横排显示”讲解视频教程。【如何去课程广告

欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下CSS如何控制DIV横排显示

我们在网页中写二个Div标签后,默认情况下是上下排列的,我们做网站时需要将二个DIV横排显示,需要我们对每个DIV的浮动样式设置为左浮动.

我们对div设置一个float浮动属性即可解决不并排显示,只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。代码如下:

/**
* 代码来源:学做网站论坛 http://www.xuewangzhan.net/
CSS控制DIV横排
**/
<style>div{float:left}</style>
<div>第一个div盒子</div><div>第二个div盒子</div><div>第三个div盒子</div><div>第四个div盒子</div>

CSS如何控制DIV横排显示

这里我们对div通设一个浮动,当然实际使用时候,要通排显示div对象的加入css类,我们就对要同行显示css选择器设置浮动。避免其它不需要设置的也被加入浮动样式。

我要分享到:
上一课: 下一课:

发表评论

*

* 绝不会泄露