0

Made an image for better understanding of the problem.

picture showing the problem

Need code for .bgimage and .content div

Is this even possible for crossbrowser css (IE7+ and other major browsers) without any scripting?

4

1 回答 1

-1

它实际上比预期的要长一点，但我在现实生活中得到了你的照片。在没有先做更多研究并编写一些实际代码的情况下，不要在这里再问任何问题。

这是一个演示

编码

HTML：

<body>
  <div id = "header">
  </div>
  <div id = "bgimage">
  </div>
  <div id = "content">
  </div>
  <span class = "clear"></span>
  <div id = "footer">
  </div>
</body>

CSS：

*
  {
  margin: 0;
  padding: 0;
  }

body
  {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  }

#header
  {
  width: 100%;
  height: 200px;
  background-color: purple;
  }

#bgimage
  {
  position: absolute;
  top: 200px;
  left: 0px;
  right: 50%;
  height: 600px;
  background-color: green;
  }

#content
  {
  position: relative;
  width: 700px;
  height: 600px;
  float: right;
  z-index: 2;
  background-color: blue;
  }

.clear
  {
  clear: both;
  }

#footer
  {
  position: relative;
  top: 600px;
  width: 100%;
  height: 200px;
  background-color: red;
  }

注意：我还没有优化 CSS，有一些工作可以在那里完成。

代码也在这里

解释

我在代码中使用的元素（你可能想用谷歌搜索）：

  • CSS 重置
  • CSS 清除
  • 绝对定位 CSS
  • 相对定位 CSS
于 2013-05-03T00:25:30.090 回答