CSS如何定义DIV,使DIV实现多列的排序?

html-css029

CSS如何定义DIV,使DIV实现多列的排序?,第1张

用float,你可以参考下面的代码

<div style="width:500pxheight:100px">

<div style="float:leftwidth:100pxheight:100pxbackground:red"></div>

<div style="float:leftwidth:100pxheight:100pxbackground:green"></div>

<div style="float:leftwidth:100pxheight:100pxbackground:black"></div>

<div style="float:leftwidth:100pxheight:100pxbackground:blue"></div>

</div>

使多个div并列一行的方法是将div的css样式设知定为浮动方式:float:left或者是设定为inline-block行内块元道素【ie6下设置为inline行内元素已保证兼容性】。版

前提是几个div宽度总和不能超出父元素的宽度。

<div

class="d1

clearfix">

<div

class="d1-1"></div>

<div

class="d1-2"></div>

<div

class="d1-3"></div>

</div>

css:

.d1{

width:1200px

margin:0

auto

overflow:hidden}

.d1

div{

float:left/*将块元素div设定权为左浮动*//*display:inline-block

_display:inline*/

width:400px

height:150px

background:#ccc}