100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > div同行显示_css如何让多个div盒子并排同行显示?

div同行显示_css如何让多个div盒子并排同行显示?

时间:2019-06-16 17:33:37

相关推荐

div同行显示_css如何让多个div盒子并排同行显示?

div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式。

一、使用css float并排显示

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

div {float:left}

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

二、使用css display同行显示

我们加入display:inline即可解决实现同行并排显示div盒子对象。

div {display:inline}

实例:

如果有三个div,分別为left , middle, right

而left与right的宽度是固定的,要依照不同的解析度将middle自动填满剩余的部分

做法如下

col3

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。