css怎样设置 div平均分配满

html-css032

css怎样设置 div平均分配满,第1张

给两种方法:

第一种:百分比。使用均分的百分比宽度。

第二种:css3弹性布局。父级给定宽度display:flexflex-direction:row子元素全部设置flex:1;

如果你的布局属于哪种精确宽度布局的话,建议你需要有边框效果的时候使用其他方式达到边框效果,比如我有时候会用2个div嵌套,外部div设定padding以及背景色,内部设定背景色来达到边框的效果;因为用这种方法可以兼容所有浏览器,而boder在不同浏览器中的解析是不同的,这就造成页面出错的问题

至于你问的这个问题,我给你做2个解决方案吧,看看你能不能用得上

1、

<div style="width:950pxmargin:0 auto">

<div style=" background-color:#aaapadding:0px 1px 1px 1pxwidth:188pxfloat:left">

<div style="background-color:#FCFCFCheight:103px"></div>

</div>

<div style=" background-color:#aaapadding:0px 1px 1px 0pxwidth:189pxfloat:left">

<div style="background-color:#FCFCFCheight:103px"></div>

</div>

<div style=" background-color:#aaapadding:0px 1px 1px 0pxwidth:189pxfloat:left">

<div style="background-color:#FCFCFCheight:103px"></div>

</div>

<div style=" background-color:#aaapadding:0px 1px 1px 0pxwidth:189pxfloat:left">

<div style="background-color:#FCFCFCheight:103px"></div>

</div>

<div style=" background-color:#aaapadding:0px 1px 1px 0pxwidth:189pxfloat:left">

<div style="background-color:#FCFCFC height:103px"></div>

</div>

</div>

2、

<div style="width:950pxmargin:0 auto">

<div style="border:1px solid #aaabackground-color:#FCFCFCfloat:leftwidth:189pxheight:103px"></div>

<div style="border:1px solid #aaaborder-left:0background-color:#FCFCFCfloat:leftwidth:189pxheight:103px"></div>

<div style="border:1px solid #aaaborder-left:0background-color:#FCFCFCfloat:leftwidth:189pxheight:103px"></div>

<div style="border:1px solid #aaaborder-left:0background-color:#FCFCFCfloat:leftwidth:189pxheight:103px"></div>

<div style="border:1px solid #aaaborder-left:0background-color:#FCFCFCoverflow:hiddenheight:103px"></div>

</div>

不是很明白你的意思,是不是比如把界面分为4列的意思?

如果是,设置float:leftwidth:25%这样就可以了~注意设置宽度为百分比~

如果不是,请重新描述清楚~