-1

第二次尝试，因为我昨天很不幸地解释了这个问题。我正在尝试在 html/CSS 中实现以下布局：

在此处输入图像描述

灰色框是 1040 像素宽的居中站点容器。上面是一个带有更宽图片的标题，如果屏幕分辨率更大，它将向右侧增长。我怎么能用 CSS 做到这一点？我知道我可以用 javscript 计算站点容器的左边距并动态设置标题的左边距，但我想要一个 css 解决方案。

问候，马丁

4

2 回答 2

1

又是我，我现在终于明白你的意思了。我最接近你想要的东西是用percents尝试。

<div id = "header">
</div>

<div id = "sitecontainer">
</div>

CSS：

#header{
height: 200px;
width: 100%px;
background-color: black;
margin-left: 25%;
}

尝试摆弄这些百分比，直到找到适合您的最佳位置。

添加; 制作 2 个 div 可能会更好，如下所示： http: //puu.sh/3thxc/085a639816.png。但我似乎无法将第二个 div（headerright）放在标题 div 旁边。

于 2013-07-02T11:08:53.677 回答
0

我想出了一个可行但不是最甜蜜的解决方案，所以如果您有更好的方法，请告诉我：

body {
  overflow-x: hidden;
}

#growing-header {
  position: absolute;
  left: 0;
  width: 2400px;
  background-color: #edf034;
}

#main {
  position: relative;
  background-color: #00aaff;
}

和容器：

<body>
  <div id="main">
    <div id="growing-header">my header...</div>
    <!-- some more divs, site-content,...</div>
  </div>
</body>

干杯，马丁

于 2013-07-02T11:21:51.600 回答