当前位置：文江博客话题详情

CSS：与灵活高度内容 div 下面的图像对齐

发布于 2024-11-25 19:59:52 字数 664 浏览 3 评论 0原文

我的网站有一个相当复杂的页脚，请参阅 http://www.roadsafetyforchildren.co.uk/< /a>，不太确定如何尝试构建它：

Footer

我已将图像分成两部分，第一部分下面需要水平居中，但位于内容下方：在此处输入图像描述

第二部分需要水平重复，但与上图保持一致。在此处输入图像描述

因此，这两个图像需要看起来像问题顶部的第一张图像。

我可以将两个图像匹配 IF 上面的内容 div 具有固定的高度。问题是内容 div 需要能够随着内容灵活地增长/缩小。因此，内容 div 底部的图像根据其大小在页面上上下移动。

如何使两个图像对齐并在其上方放置灵活的内容 div？

Ps 有很多答案，但我认为其中没有几个人理解了这个问题。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遗失的美好 2024-12-02 19:59:52

对我来说似乎很简单，你需要两个 div：

<div id="content">
     <div id="inner_content">
         <!-- Append image to very bottom -->
         <img src="city" width="" height="" alt="" />
     </div>
     <!-- Background image of hills goes here -->
</div>

CSS 很简单..

#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }

Seems straight forward to me, you will need two divs:

<div id="content">
     <div id="inner_content">
         <!-- Append image to very bottom -->
         <img src="city" width="" height="" alt="" />
     </div>
     <!-- Background image of hills goes here -->
</div>

CSS is straight forward..

#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }

回复收藏 0 原文

記憶穿過時間隧道 2024-12-02 19:59:52

试试这个：

html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}

try this:

html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}

回复收藏 0 原文

_畞蕅 2024-12-02 19:59:52

无论内容在什么

中，都应该是 height:auto 并且具有大约 5 个像素高、任何宽度的背景图像，并且应该在 css 中重复 y ，并且

应为 float:left。这样，页脚将始终位于内容下方，并且无论内容高度如何，都将具有重复的背景。

除了为内容创建背景图像之外，无需搞乱 PS。

这将是内容 div 的背景图像，并且重复 y，因此它从上到下重复：

以及页脚图像：

在此处输入图像描述

如果将“背景重复”图像设置为 png，则可以使阴影不透明容纳身体背景图像发生变化。

回复收藏 0 原文

傾城如夢未必闌珊 2024-12-02 19:59:52

您可以在元素内放置背景：

div#footer {
    background: url('roadpic.jpg') bottom center no-repeat;
}


<div id="content">your content goes here</div>
<div id="footer">...</div>

这将使页脚 div 始终保持在内容下方。

You can position a background inside an element:

div#footer {
    background: url('roadpic.jpg') bottom center no-repeat;
}


<div id="content">your content goes here</div>
<div id="footer">...</div>

which will keep the footer div below the content at all times.

回复收藏 0 原文

你对谁都笑 2024-12-02 19:59:52

两个背景都需要一个共同的锚点。在水平可调整大小的窗口和小于窗口宽度 100% 的内容区域之间，两个容器之间唯一可以保持不变的点是主体的水平中心。

因此，您的山丘背景需要以主体或其他具有 100% 窗口宽度的容器为中心。道路图像可以固定在固定宽度居中容器内（如下例所示），也可以居中在居中可变宽度容器内。

生成的 CSS 将如下所示：

div#wrapper {
  width: 100%;
  background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
  width: 800px;
  margin: 0 auto;
  /* background can be offset to the left or right if the width is fixed
     if not it must be centred */
  background: url(road.png) right bottom no-repeat;
}

HTML：

<body>
  <div id="wrapper">
    <div id="content">
      <p>Some content here</p>
    </div> <!-- content -->
  </div> <!-- wrapper -->
</body>

两个容器的背景将具有相同的锚点，并且随着窗口大小的调整，它们将一起移动！

因为 #content 是 #wrapper 的子级，所以它们将保持垂直对齐，因为 #wrapper 会随着 #content 变高而变高（除非 #content 是浮点数，在这种情况下，您必须使用 :after clearing 技巧；或者如果#content 是position:absolute，则需要手动或使用javascript 对齐它们）。

You will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.

So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.

The resulting CSS will be something like this:

div#wrapper {
  width: 100%;
  background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
  width: 800px;
  margin: 0 auto;
  /* background can be offset to the left or right if the width is fixed
     if not it must be centred */
  background: url(road.png) right bottom no-repeat;
}

And the HTML:

<body>
  <div id="wrapper">
    <div id="content">
      <p>Some content here</p>
    </div> <!-- content -->
  </div> <!-- wrapper -->
</body>

The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!

Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).

回复收藏 0 原文

~没有更多了~