Question

我有这个page有这个CSS

body {
  background-image: url("images/BACKGROUND5.jpg");
  background-repeat: no-repeat;
}

和两个div

#borderleft {
  background: none repeat-y scroll 0 0 #93A87D;
  clear: left;
  float: left;
  margin-left: -10px;
  margin-top: 610px;
  visibility: visible;
  width: 70px;
  z-index: 2;
}

#borderright {
  background: none repeat-y scroll 0 0 #93A87D;
  clear: right;
  float: right;
  margin-left: -10px;
  margin-top: 610px;
  position: relative;
  visibility: visible;
  width: 70px;
  z-index: 2;
}

这是HTML

<body>
<div id="borderleft"></div>
<div id="borderright"></div>

关于如何在中心和绿色背景中制作图像的任何想法：无重复-y滚动0 0＃93A87D;在外面

Answer 1

当两个边框列的宽度固定时，执行此类布局的一种好方法是this。

元素是：

包含<div>

position: relative

分别为<div>，固定宽度和position: absolute / left: 0的边框right:0
A＆＃34;内容＆＃34; <div> margin-left margin-right <div>等于边框<body>的宽度。

在我上面链接的示例中，没有容器div（{{1}}元素扮演该角色），但如果您希望能够在页面上移动此排列，则需要一个一个整体。

Answer 2

部分解决方案是让你的体型如下：

body {
  background-image: url("images/BACKGROUND5.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

而不是

margin-top: 610px;

在左右div中

，尝试用

替换它

height: 610px;

Answer 3

使用您发布的图片，我建议like this。

为什么不给我一个绿色两边的边框？

3 个答案: