我用css排列一行5个框,总宽度是950px,每个框平均分配的宽度190,加上边 ...

发布网友发布时间：2022-05-02 04:56

共3个回答

热心网友时间：2022-04-21 11:29

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

至于你问的这个问题，我给你做2个解决方案吧，看看你能不能用得上
1、
<div style="width:950px; margin:0 auto; ">
<div style=" background-color:#aaa; padding:0px 1px 1px 1px; width:188px; float:left">
<div style="background-color:#FCFCFC; height:103px;"></div>
</div>
<div style=" background-color:#aaa; padding:0px 1px 1px 0px; width:189px; float:left">
<div style="background-color:#FCFCFC; height:103px;"></div>
</div>
<div style=" background-color:#aaa; padding:0px 1px 1px 0px; width:189px; float:left">
<div style="background-color:#FCFCFC; height:103px;"></div>
</div>
<div style=" background-color:#aaa; padding:0px 1px 1px 0px; width:189px; float:left">
<div style="background-color:#FCFCFC; height:103px;"></div>
</div>
<div style=" background-color:#aaa; padding:0px 1px 1px 0px; width:189px; float:left">
<div style="background-color:#FCFCFC; height:103px;"></div>
</div>
</div>

2、
<div style="width:950px; margin:0 auto; ">
<div style="border:1px solid #aaa; background-color:#FCFCFC; float:left; width:189px; height:103px;"></div>
<div style="border:1px solid #aaa; border-left:0; background-color:#FCFCFC; float:left; width:189px; height:103px;"></div>
<div style="border:1px solid #aaa; border-left:0; background-color:#FCFCFC; float:left; width:189px; height:103px;"></div>
<div style="border:1px solid #aaa; border-left:0; background-color:#FCFCFC; float:left; width:189px; height:103px;"></div>
<div style="border:1px solid #aaa; border-left:0; background-color:#FCFCFC; overflow:hidden; height:103px;"></div>
</div>

热心网友时间：2022-04-21 12:47

我用css排列一行5个框，总宽度是950px，每个框平均分配的宽度190，加上边框宽度1px后

你算了，你的宽度应该是180，因为你有5个框，每个框的宽度是1，每个框左右就占2px了，所以你最好每个框的宽度比180px小即可。

热心网友时间：2022-04-21 14:22

边框占2px;把你的代码贴出来看下吧
#content { width:950px; margin:0 auto;}
#content div { width:188px; border:1px solid #ccc; float:left; height:100px;}
<div id="content">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>