具有自动边距的特定 css 定位/动态宽度答案

【问题标题】：Specific css positioning / dynamic width with auto margin具有自动边距的特定 css 定位/动态宽度
【发布时间】：2013-05-03 08:51:54
【问题描述】：

制作图片以便更好地理解问题。

需要 .bgimage 和 .content div 的代码

这对于没有任何脚本的跨浏览器 css（IE7+ 和其他主流浏览器）是否可行？

【问题讨论】：

你的问题在哪里？
我根本不知道如何在 css 中做到这一点。
我上传了你的图片，正在等待修改。同时，what have you tried?
这确实是非常可行的，但不要指望任何人只是为你做所有的工作。 Here looks like a great CSS tutorial，谷歌会给你更多，你正在寻找CSS layout design或类似的东西。另外，请在提问之前阅读 StackOverflow 的 how to ask。
制作这张照片是一个很好的开始，您清楚地了解自己需要什么。正如 Frank Presencia Fandos 所说，尝试“自学”的方式。对于这种结构，您只需要 html 和 css。有很多网站提供教程来帮助你。如果您遇到一些问题，请回来:)

标签： css height positioning margin

【解决方案1】：

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

Here is a demo

代码

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，有一些工作可以在那里完成。

The code is also here

说明

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

CSS 重置
CSS 清晰
绝对定位 CSS
相对定位 CSS

【讨论】：

我真的很难过，因为我给你的印象是一个不能花几分钟谷歌搜索结果的人。我不是那样的。而且您的解决方案不起作用，div只是相互重叠。明确规定 .bgimage 的宽度必须是内容和屏幕边缘之间的间隙的宽度。在您的示例中，宽度为 50%；
我也无意冒犯你，对不起。 shown bgimage 进入您指定的空间......但 div 实际上在下面。如果你真的需要，我会修复它。
您可能会问为什么我的解决方案有问题。这是因为我希望 .bgimage div 有一个大的背景图像（因此 div 的名称 :) 右对齐，这不会导致滚动条。在您的解决方案中，图像与内容栏部分重叠。
奇怪的是，您在这里有一个背景图像，并且水平延伸但不是垂直延伸。您需要支持哪些浏览器？
我更新了我的答案。但要小心older browsers 和 Opera。