帮助需要与DIV-布局的网站

StackOverflow https://stackoverflow.com/questions/964959

  •  12-09-2019
  •  | 
  •  

题

我试图建立一个网页，与如下：

已经具有如下:

  • 一个div为页中心的整个网页，与宽809px
  • 内部 <div class="page"> 如下：
    • <div class="header">
    • <div class="container"> (集装箱内容的东西)
    • <div class="footer">

我在努力与:

  • <div class="container"> 应该包含以下内容：
    • 左边的 <div class="leftShadow"> 拥有100%的高度的容器中，与剩的阴影的图像作为背景 <div class="leftShadow">
    • 第二至左 <div class="custom_content"> 拥有100%的高度的容器(将包含的内容的页面
    • 第二，正确的 <div class="sidebar_right"> 拥有100%的高度的容器(将包含额外的链路)
    • 右边的 <div class="rightShadow"> 拥有100%的高度的容器中，与权利的阴影图像作为背景 <div class="rightShadow">

因此，要总结：

<div class="page">
    <div class="header">header image</div>
    <div class="container">
        <div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
        <div class="custom_content">(this is where the content would be)</div>
        <div class="sidebar_right">(some other links)</div>
        <div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>

那么，什么是应该发生的情况是，当任 custom_content 或 sidebar_right div的力量在长度低于其他，其他人会伸展在高度是相同的，与作为较长div。显然，这两侧div的(leftShadow和rightShadow)也应当延伸到100％的容器的高度。

有人可以请指引我在正确的方向？基本上，这些div是应该表现得就像一个表将当一个td的内容延伸超出了高度的其他td。

有帮助吗？

解决方案

不用div样的表！

该leftShadow和rightShadow div是完全不必要的。把你的背景图像成一个单一的形象，并将其设置为背景的容器div。

确定的背景图像充满了高度的容器，设置背景的-重复一遍：重复。

其他提示

为什么不能使用类似"仿列"?

看看 http://www.alistapart.com/articles/fauxcolumns/

也许你不需要leftShadow和rightShadow div:看看 仿列.

这是你在找什么，我希望。:)

我会做这种不同是因为你不会让你div表现得像表。

我不完全确定你想要这看起来像，但我猜猜你想要某种形式的影像下的左边和右边的容器div。怎么样去除leftShadow和rightShadow div，把一个可重复的背景图像的内容div的宽809px(并可能高度1，取决于什么你的阴影像看起来像).也或许设置溢出：隐藏的内容div-如果我记得没错那是一种hack这将使含div伸展，在这种情况。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top