如何计算多层边框里可容纳的图片宽度

rainbow

多层边框里可容纳的图片宽度

  在制作多层边框时，不少网友常常没有注意到多层边框代码里的border、cellspacing、cellpadding、PADDING、margin 等等对边框显示的影响。当总宽度和插图宽度设定的不正确时，在不同的网站里，会有不同的效果。

  在“老校友”里，系统会保证你的代码里的总宽度，而自动遮掉太宽的图片右侧。

  但在“公用栏目”里，若所设定的边框宽度不足时，网站虽然保留了边框里图片的完整宽度，却把边框的总宽度撑大了。

  现以《参加59届巴中校友游轮大联欢感想》这篇帖子为例, 这篇帖子用了10层边框，每层边框（table）里设定的border、cellspacing、cellpadding、PADDING 如下：
border + cellspacing + cellpadding + PADDING = (60 + 1 + 15 + 3 + 1 + 2 + 1 + 10 + 22 + 1 + 2 + 20) = 138

  “老校友”里此帖子的代码设定了总宽度为800
  减去左右两边的border、cellspacing、cellpadding、PADDING後，可容纳的图片最大宽度是：800 - (138 x 2) = 524
  但帖子用了640宽的图片，屏幕上显示出来的图片右侧被斩去了一截，最右边戴鸭嘴帽的男人不见了。（请看以下截图）

http://boanson.orzweb.net/viewthread.php?tid=206&extra=page%3D1

  有2个方法，可以保证图片的完整性：
  1）缩小图片：在插图代码img 里设定 width 不大于524；
  2）加大最外一层边框宽度为 640 + (138 x 2) = 916 （图片原宽度加上左右两边的border、cellspacing、cellpadding、PADDING）

  在“公用栏目”里，保留了图片的完整640宽，但却把原代码里设定的总宽度为700撑大了，实际上是等于 640 加上左右两边的border、cellspacing、cellpadding、PADDING：
  屏幕上显示的总宽度为 640 + (138 x 2) = 916
  代码里设定的700宽度等于虚设，所以显得边框宽了很多，小屏幕的网友有可能看不到右边一侧的边框画面。

http://bazhong5069.868cn.net/t1888-topic

  所以不管在哪个网站，在使用多层边框时，必须注意每层table里的设定的border、cellspacing、cellpadding、PADDING、margin数字，算出边框剩下的可容纳图片的空间宽度，设定出正确的图片宽度和边框需要的总宽度，这样才能设计出完整的边框和图片。