-1

我正忙于时事通讯，背景图像在时事通讯中不起作用，所以我尝试使用 1px 边框来解决这个问题。顶部和底部阴影工作正常，但我无法将左侧和右侧置于 100% 高度，所以也许有人可以帮助解决这个问题？

这是我现在拥有的小提琴：单击此处获取小提琴

HTML：

 <table width="702" cellspacing="0" cellpadding="0">
      <tr>
           <td width="72" valign="top"><img src="logo-ro.png" alt="" /></td>
           <td colspan="2" valign="top">
                <div style="border-top : 1px solid #e3e8ec;"><div style="border-top : 1px solid #e3eaf2;"><div style="border-top : 1px solid #e1eaf3;"><div style="border-top : 1px solid #e1eaf1;"><div style="border-top : 1px solid #e2ebf2;"><div style="border-top : 1px solid #e2ebf2;"><div style="border-top : 1px solid #e4ebf3;"><div style="border-top : 1px solid #e7ebf4;"><div style="border-top : 1px solid #e8ecf5;"><div style="border-top : 1px solid #e9edf6;"><div style="border-top : 1px solid #eaedf6;"><div style="border-top : 1px solid #ecf1f7;"><div style="border-top : 1px solid #ecf1f7;"><div style="border-top : 1px solid #edf2f6;"><div style="border-top : 1px solid #eff2f7;"><div style="border-top : 1px solid #f1f5f8;"><div style="border-top : 1px solid #f4f5f9;"><div style="border-top : 1px solid #f5f6f8;"><div style="border-top : 1px solid #f6f6f8;"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
           </td>
      </tr>
      <tr>
           <td width="19" valign="top">
                <div style="border-left : 1px solid #e3e8ec;"><div style="border-left : 1px solid #e3eaf2;"><div style="border-left : 1px solid #e1eaf3;"><div style="border-left : 1px solid #e1eaf1;"><div style="border-left : 1px solid #e2ebf2;"><div style="border-left : 1px solid #e2ebf2;"><div style="border-left : 1px solid #e4ebf3;"><div style="border-left : 1px solid #e7ebf4;"><div style="border-left : 1px solid #e8ecf5;"><div style="border-left : 1px solid #e9edf6;"><div style="border-left : 1px solid #eaedf6;"><div style="border-left : 1px solid #ecf1f7;"><div style="border-left : 1px solid #ecf1f7;"><div style="border-left : 1px solid #edf2f6;"><div style="border-left : 1px solid #eff2f7;"><div style="border-left : 1px solid #f1f5f8;"><div style="border-left : 1px solid #f4f5f9;"><div style="border-left : 1px solid #f5f6f8;"><div style="border-left : 1px solid #f6f6f8;"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
           </td>
           <td valign="top">fdsfsfsdf</td>
           <td width="19" valign="top">
                <div style="border-right : 1px solid #e3e8ec;"><div style="border-right : 1px solid #e3eaf2;"><div style="border-right : 1px solid #e1eaf3;"><div style="border-right : 1px solid #e1eaf1;"><div style="border-right : 1px solid #e2ebf2;"><div style="border-right : 1px solid #e2ebf2;"><div style="border-right : 1px solid #e4ebf3;"><div style="border-right : 1px solid #e7ebf4;"><div style="border-right : 1px solid #e8ecf5;"><div style="border-right : 1px solid #e9edf6;"><div style="border-right : 1px solid #eaedf6;"><div style="border-right : 1px solid #ecf1f7;"><div style="border-right : 1px solid #ecf1f7;"><div style="border-right : 1px solid #edf2f6;"><div style="border-right : 1px solid #eff2f7;"><div style="border-right : 1px solid #f1f5f8;"><div style="border-right : 1px solid #f4f5f9;"><div style="border-right : 1px solid #f5f6f8;"><div style="border-right : 1px solid #f6f6f8;"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
           </td>
      </tr>
      <tr>
           <td colspan="3" valign="top">
                <div style="border-top : 1px solid #f6f6f8;"><div style="border-top : 1px solid #f5f6f8;"><div style="border-top : 1px solid #f4f5f9;"><div style="border-top : 1px solid #f1f5f8;"><div style="border-top : 1px solid #eff2f7;"><div style="border-top : 1px solid #edf2f6;"><div style="border-top : 1px solid #ecf1f7;"><div style="border-top : 1px solid #ecf1f7;"><div style="border-top : 1px solid #eaedf6;"><div style="border-top : 1px solid #e9edf6;"><div style="border-top : 1px solid #e8ecf5;"><div style="border-top : 1px solid #e7ebf4;"><div style="border-top : 1px solid #e4ebf3;"><div style="border-top : 1px solid #e2ebf2;"><div style="border-top : 1px solid #e2ebf2;"><div style="border-top : 1px solid #e1eaf1;"><div style="border-top : 1px solid #e1eaf3;"><div style="border-top : 1px solid #e3eaf2;"><div style="border-top : 1px solid #e3e8ec;"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
           </td>
      </tr>
 </table>
4

2 回答 2

1

尝试为 div 的左右层次结构中最里面的 div 赋予一些高度。

<div style="border-left : 1px solid #f6f6f8; height: 100px;"></div>

在这里看小提琴：http: //jsfiddle.net/z4DFy/

于 2013-10-09T10:00:44.440 回答
-1

立即放弃这种做法。

相反，使用 CSS box-shadow（小提琴示例）。

例如

box-shadow: 0 0 28px 14px #E3EAF2 inset;

该属性有 6 个参数：

  • 左偏移
  • 顶部偏移
  • 模糊
  • 传播（可选 -默认为 0 ）
  • 颜色
  • 插图（可选）
于 2013-10-09T10:04:55.710 回答