DIV+CSS在页面设计时经常需要在左右两边或多个DIV并排同行显示的实用代码

在网页设计美工时通常在最终效果上煞费苦心,赶工忙起来都没时间吃饭,偏偏这时代码闹脾气,位置足够,距离数据、小数点、标点符号都检查过了没问题。可这两个DIV不能并排显示呢?头痛,头发都挠没了。

在默认情况下,DIV是不允许并排显示的,它们相遇都会各占一行。

这个情况对于很多新手来说是一件不可理喻的事,好在有解决方法可以来挽救。

第一种 Float浮动方法:

Float的属性值有:left、right、none
float : none | left |right

Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动

第二种 Display方法:

display:Inline 在一排显示。

display的其它值有:
block :块对象的默认值。用该值为对象之后添加新行
none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline :内联对象的默认值。用该值将从对象中删除行
compact :分配对象为块对象或基于内容之上的内联对象
marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
inline-table :将表格显示为无前后换行的内联对象或内联容器
list-item :将块对象指定为列表项目。并可以添加可选项目标志
run-in :分配对象为块对象或基于内容之上的内联对象
table :将对象作为块元素级的表格显示
table-caption :将对象作为表格标题显示
table-cell :将对象作为表格单元格显示
table-column :将对象作为表格列显示
table-column-group :将对象作为表格列组显示
table-header-group :将对象作为表格标题组显示
table-footer-group :将对象作为表格脚注组显示
table-row :将对象作为表格行显示
table-row-group :将对象作为表格行组显示

接下来我们来看看,为了效果明显添加了背景色:

左边”leftDiv” 的内容
www.zhuei.com
右边”rightDiv” 的内容
www.zhuei.net