0

我正在处理一个将在整个网站周围使用“自定义”边框的主页。

这就是我想用我的 div 实现的目标。

[LEFT-TOP-BORDER   ][MIDLLE-TOP-BORDER   ][RIGHT-TOP-BORDER   ]
[LEFT-MIDDLE-BORDER][Content             ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
  • 所有边框角（左/右顶部和底部边框）具有固定的宽度和高度。
  • 中间顶部/底部边框具有固定高度，但应扩展到站点的整个宽度。
  • 中间的左右边框有一个固定的宽度，但即使内容变大也应该填满屏幕的整个高度。
  • 边框应远离内容 div，因此如果窗口太小，则不应位于内容 div 上。
  • 内容 div 将具有固定的宽度和高度。
  • 当窗口很小时，我希望页脚保持粘性而不会再次重叠内容 div。

希望很清楚我想做什么！

我几乎让它工作，但我遇到了左/右中边框的问题。在这里查看自己

正如您所看到的，当窗口变小时，边框与内容 div 重叠。

但我认为我这样做的方式不好？

我该怎么做？

先谢谢了！

亲切的问候亚历克斯

4

1 回答 1

0

查看您的代码您需要做的是将您的 div 放在彼此内部，而不是彼此相邻。所以你的中间部分将是：

<div class="middle-left">
    <div class="middle-right">
        <div class="middle-content">
            Content
        </div>
    </div>
</div>

然后给你的左中左填充正确宽度并将背景放置在左边，中右一些正确宽度的右填充并将背景放置在右边，然后随着你的内容变高，边距 div会自动展开。

对所有三层执行此操作，如下所示：

<div class="wrapper">
    <div class="top-left">
        <div class="top-right">
            <div class="top-content">
            </div>
        </div>
    </div>
    <div class="middle-left">
        <div class="middle-right">
            <div class="middle-content">
                 Content
            </div>
        </div>
    </div>
    <div class="bottom-left">
        <div class="bottom-right">
            <div class="bottom-content">
            </div>
        </div>
    </div>
</div>

身体高度现在不需要你的 CSS 中的 100% 了。包装器可以居中，也不需要高度。我会尝试真正摆脱你所有的 CSS，并用这个新的 HTML 结构重新开始。只需添加填充和一些背景颜色即可。

于 2013-03-16T00:48:33.637 回答