零基础建站培训教程介绍

第7节:CSS如何控制DIV横排显示

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

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

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

/**
* 代码来源:学做网站论坛 https://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选择器设置浮动。避免其它不需要设置的也被加入浮动样式。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学做网站论坛零基础学建网站课程