Question

我需要设计一个每边都有边框图像的页面。我需要页面适合1280x1024和1024x768分辨率。是否可以为中心div设置固定大小并以较低分辨率裁剪边框图像？

1280x1024：border-200px center-840px border-200px
1024x768：border-72px center-840px border-72px

我用200px X 5px制作了两张图片。我试图使用float属性但没有成功。所以到目前为止我已经这样做了，它在1280x1024中有效但在1024x768中却没有（它太宽了）。

HTML：

<body>
  <div id="right"></div>
  <div id="left"></div>
  <div id="center">
    <h1>Title</h1>
    <p>Content here</p>
  </div>
</body>

CSS：

html {
  margin: 0px;
  padding: 0;
}

body {
  margin: 0px;
  padding: 0;
  width: 100%;
  background-color: white;
  overflow: auto; /*to clear the floats*/
}

#right {
  clear: both;
  position: absolute;
  right: 0;
  background-image: url('/site_media/images/border-right.jpg');
  background-repeat: repeat-y;
  width: 200px;
  height: 100%;
}

#left {
  clear: both;
  position: absolute;
  left: 0;
  background-image: url('/site_media/images/border-left.jpg');
  background-repeat: repeat-y;
  width: 200px;
  height: 100%;
}

#center {
  width: 840px;
  margin: 0px auto;
  padding-left:10px;
  padding-right:10px;
}

谢谢！

Answer 1

由于中心元素如果是固定宽度，这应该很容易。侧边应该放在身体的“背景”而不是自己的div。

如果我错了，请纠正我，根据我在这里理解的情况，你希望侧边框被裁剪/裁剪1024分辨率而不是收缩。如何制作1280宽度的单张图像，相应地左右两侧放置边框图像，使中心区域为空。将其保存为单个图像（如果您想要透明背景，则由您决定），然后执行以下操作。

<style type="text/css">
body { /* can also use your own div */
   background:url(path_to_the_single_image) repeat-y top center;
}

#center {
   width:840px;
   margin:0 auto; /* centered the div */
   background:green;
}
</style>

<body>
   <div id="center">center content</div>
</body>

那就是它！现在你应该将固定宽度元素放在中间，将边框放在背景中。如果你在1280加载它，你应该看到完整的边框，而如果你调整到1024，你的居中元素应该保持在那里，你的边框现在应该被浏览器裁剪掉。

请告诉我这是否是您要找的......：）

Answer 2

如果我理解正确 - 没有javascript，你要找的东西有点难以实现。您可以考虑采用一种不同的方法：侧边栏（图形边框）可以在中心内容下滑动吗？

示例：

<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
    <div id="wrapper">
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="center">center</div>
    </div>
</body>

CSS设计页面的技巧

2 个答案: