用DIV+CSS如何实现兼容以下布局
我要实现的是四周带图片边框,里面是个二行四列的。当我做好外面框加往里面填那个二行四列内容时老是把右边和下面撑开,怎么解决?我的布局方法是先把它分成上,中,下三块,再在中间...
我要实现的是四周带图片边框,里面是个二行四列的。当我做好外面框加往里面填那个二行四列内容时老是把右边和下面撑开,怎么解决?
我的布局方法是先把它分成上,中,下三块,再在中间块里真左,右边框和中间放那个二行四列。但当我复制到第二行第一个时就会把右边和下边给撑开,请问怎么解决。我都有固定高度也没用。
<div>
<div class="top> </div>
<div class="mibble">
<div class="left"> </div>
<div class="center">
/*这里放二行四列内容*/
</div>
</div>
<div class="bottom"></div>
</div>
补充图片 展开
我的布局方法是先把它分成上,中,下三块,再在中间块里真左,右边框和中间放那个二行四列。但当我复制到第二行第一个时就会把右边和下边给撑开,请问怎么解决。我都有固定高度也没用。
<div>
<div class="top> </div>
<div class="mibble">
<div class="left"> </div>
<div class="center">
/*这里放二行四列内容*/
</div>
</div>
<div class="bottom"></div>
</div>
补充图片 展开
展开全部
像你这种,我不建议用两行的去做,
你应该把图片跟下面的标题看成一个整体的,
<div style="width:23%;float:left;overfow:hidden;">
<table width=""><tr><td align="center" valign="middle" height="" width=""><img src=""></td></tr></table>
<span style="display:block;overflow:hidden;line-height:24px;"><"><a href="#">标题</a></span>
</div>
<div style="width:23%;float:left;overfow:hidden;">
<table width=""><tr><td align="center" valign="middle" height="" width=""><img src=""></td></tr></table>
<span style="display:block;overflow:hidden;line-height:24px;"><"><a href="#">标题</a></span>
</div>
<div style="width:23%;float:left;overfow:hidden;">
<table width=""><tr><td align="center" valign="middle" height="" width=""><img src=""></td></tr></table>
<span style="display:block;overflow:hidden;line-height:24px;"><"><a href="#">标题</a></span>
</div>
<div style="width:23%;float:left;overfow:hidden;">
<table width=""><tr><td align="center" valign="middle" height="" width=""><img src=""></td></tr></table>
<span style="display:block;overflow:hidden;line-height:24px;"><a href="#">标题</a></span>
</div>
这样去漂浮也许能达到你的要求,用表格是为了保证图片能居中显示,用其他方法去居中太繁琐了,
你应该把图片跟下面的标题看成一个整体的,
<div style="width:23%;float:left;overfow:hidden;">
<table width=""><tr><td align="center" valign="middle" height="" width=""><img src=""></td></tr></table>
<span style="display:block;overflow:hidden;line-height:24px;"><"><a href="#">标题</a></span>
</div>
<div style="width:23%;float:left;overfow:hidden;">
<table width=""><tr><td align="center" valign="middle" height="" width=""><img src=""></td></tr></table>
<span style="display:block;overflow:hidden;line-height:24px;"><"><a href="#">标题</a></span>
</div>
<div style="width:23%;float:left;overfow:hidden;">
<table width=""><tr><td align="center" valign="middle" height="" width=""><img src=""></td></tr></table>
<span style="display:block;overflow:hidden;line-height:24px;"><"><a href="#">标题</a></span>
</div>
<div style="width:23%;float:left;overfow:hidden;">
<table width=""><tr><td align="center" valign="middle" height="" width=""><img src=""></td></tr></table>
<span style="display:block;overflow:hidden;line-height:24px;"><a href="#">标题</a></span>
</div>
这样去漂浮也许能达到你的要求,用表格是为了保证图片能居中显示,用其他方法去居中太繁琐了,
展开全部
你这个是要用一个圆角的背景了,首先你把你的整张的圆角的图片截成三张图片(上(圆角框上部分)中(圆角框的中不,就是只有两边有有色边的)下(圆角框的下部分圆角))。
你这样做你用三个div 上面一个div(第一个)背景就是你上圆角图片设置backgroung-repeat:no 紧跟着得幼是一个div(第二个) 他的背景就是截取的圆角框图片中部,再就是下面的一个div(第三个)的背景就是你的截取圆角框的下部分了。把第一个跟第三个div的宽度跟高度定死,第二个div的宽度定了跟第一第三的一样的,高度定位 height:auto;就可以了,大功告成。
你这样做你用三个div 上面一个div(第一个)背景就是你上圆角图片设置backgroung-repeat:no 紧跟着得幼是一个div(第二个) 他的背景就是截取的圆角框图片中部,再就是下面的一个div(第三个)的背景就是你的截取圆角框的下部分了。把第一个跟第三个div的宽度跟高度定死,第二个div的宽度定了跟第一第三的一样的,高度定位 height:auto;就可以了,大功告成。
本回答被提问者采纳
2011-05-01
展开全部
<!--这里放一行四列内容-->
<div style="clear:both;"></div>
<!--这里放一行四列内容-->
<div style="clear:both;"></div>
<div style="clear:both;"></div>
<!--这里放一行四列内容-->
<div style="clear:both;"></div>
展开全部
。。。这个。。,我用ul+li来写。。
<ul>
<li>...<li/>
<li>...<li/>
<li>...<li/>
<li>...<li/>
<ul/>
(“...”里面你加div加span都随你)
<ul>
<li>...<li/>
<li>...<li/>
<li>...<li/>
<li>...<li/>
<ul/>
(“...”里面你加div加span都随你)
展开全部
用ul试试,顺便清楚下浮动
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询