css panel图片文字列表实现

html-css03

css panel图片文字列表实现,第1张

实践证明,图片可以不用float也可以平行排列,例如:

<div style="position:absolutewidth:90%left:5%right:5%top:100px">

<img src="1_27.jpg" style="position:relativeleft:0pxwidth:200px">

<img src="1_27.jpg" style="position:relativeleft:0pxwidth:200px">

<img src="1_27.jpg" style="position:relativeleft:0pxwidth:200px">

<img src="1_27.jpg" style="position:relativeleft:0pxwidth:200px">

</div>

但文字放在DIV里头必须用float:left才能平行排列。

为什么不用float呢?我觉得float挺好用的。

1.设置float属性

将块级元素的css格式设置为float:left/right,比如,有两个panel,panelA和panelB,想要使其位于同一行,只需要设置A的css格式为float:left/right即可。

注意:只是设置A的float属性哦,若设置了B的float属性,则B后面的元素也会与其位于同一行。若使用该方法,则两个块级元素紧挨着。

2.设置display

display为inline-block,即编写css代码为display:inline-block.使用该方法,两个块级元素中间有一定间隔。

注意,该方法与上一方法相同,仍然需要设置A的display属性,而非B的属性。