代码之家 › 专栏 › 技术社区 › alex

是否有可靠的方法将内容放到DIV的两侧,并且只有在用户的分辨率允许的情况下才显示内容?

css html

alex · 技术社区 · 16 年前

我的标记是这样的(为了争论)

<div id="content"></div>
<div id="layout"></div>
<div id="layout2"></<div>

然后我用这个CSS

#content {
    width: 800px;
    height: 600px;
    margin: 0 auto;
} /* place this attached to the top of the page */

#sidebar,
#sidebar2 {
    display: block;
    width: 139px;
    height: 100%;
    position: absolute;
    top: 0;
    background: url(../images/layout/pretty.png) repeat-y;
}

#sidebar {
    left: 50%;
    margin-left: -700px;
} /* at this point, it appears to the left, and does not trigger scrolling when the window is resized.. it just slides off to the left */

#sidebar2 {
    right: 50%;
    margin-right: -700px;
} /* now, when you resize, the scrollbar appears as if the content stretches from #sidebar to #sidebar2 */

有可靠的方法吗?我唯一的选择是有一个大背景图像,也就是说1200像素宽,我的重复设计在左右两侧。但如果我能让它工作的话,这看起来很麻烦。

所以我的问题是,是否有一种方法可以定位2个不影响浏览器对页面宽度的解释(即,当您调整更窄的尺寸或更小的分辨率时,这些分隔会隐藏在视区之外?)

谢谢!

编辑

谢谢你们的回答,但没有人能完全满足我的要求。重要的是,这些出现在外部的分隔符必须与内容分隔符相对。它们需要出现在左侧和右侧,并与内容相对。但是,一旦调整浏览器窗口的大小以不容纳它们,它们就会消失。 在下面 视口。我不想用 overflow-x: hidden 因为我希望拥有小分辨率/窗口的人能够左右滚动查看所有内容。

5 回复 | 直到 16 年前

SpliFF 16 年前

这是可能的,因为我已经做到了。

诀窍是在绝对定位的沙发上使用负利润。出于某种原因,浏览器不会尝试为以这种方式从页面中拉出的对象提供滚动。

您还可以使用overflow:hidden。当DIV本身收缩时,这将开始剪切DIV内容(确保DIV使用百分比或自动宽度,以便实际收缩)。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cropped sides (no scrollbars)</title>
<style>
div.decor {
    border: 3px solid red;
    overflow: hidden;
    position: absolute;
    width: 48%;
    height: 500px;
    top: 2%;
}
div.content {
    width: 60%;
    height: 300px;
    margin: 100px auto;
    padding: 10px;
    background-color: #DDF;
    opacity: 0.7;
    position: relative; /*hmmm.. without this content goes behind decor regardless of z-index... why?*/
}
</style>
</head>

<body>

    <div class="decor" style="right:50%"><img src="images/teacher.jpg" width=400 style="position:absolute;right:0px;"></div>
    <div class="decor" style="left:50%"><img src="images/teacher.jpg" width=400></div>

    <div class="content">lorem ipsum</div>
</body>

</html>

演示: http://test.dev.arc.net.au/cropped_sides.html

要点:

溢出:绝对隐藏定位装饰沙发
右:左装饰部分内容为0 (强制从左侧裁剪)
未定位的内容落后于不管Z索引是什么,但我不知道为什么。简单的解决方法是使用您的内容包装。

Traingamer 16 年前

非常简单,绝对定位。您可以绝对定位背景,并将其指定为比主要内容更低的Z索引。右侧背景色示例-为清晰起见添加的背景色:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
            "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Absolute Test</title>
<style type="text/css">
#content {
position: relative;
    width: 800px;
    height: 600px;
    margin: 0 auto;
background-color: blue;
z-index: 100;
} /* place this attached to the top of the page */
#layout2 {
height: 100px;
width: 100px;
z-index: 1;
position: absolute;
right: 50px;
top: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="layout"></div>
<div id="layout2"></<div>
</body>
</html>

也适用于图片:

#layout2 {
height: 600px;
width: 100px;
z-index: 1;
position: absolute;
right: 50px;
top: 0;
background: url(right-side.gif) repeat-y;

绝对定位会将其从流中删除,因此浏览器不会将背景宽度添加到窗口大小中。由于您的内容是固定宽度的,因此它甚至可以与IE6一起使用。

Paul Alexander 16 年前

当浏览器窗口足够宽,可以同时处理二者时,可以使用javascript使额外的div可见。我不可能让浏览器忽略布局的DIV而不隐藏它。

Matthew James Taylor 16 年前

是的,您可以这样做,但只能在屏幕的左侧。

如果右侧(视区外)有任何内容,浏览器将添加水平滚动条。唯一的例外是如果关闭滚动条,但这不能在所有浏览器中水平完成。

回到左边的想法…位于视区左侧以外的元素不会导致水平滚动条。您可以有一个固定宽度的布局,它位于屏幕的中心(两边都有自动页边距),然后在这个区域内,您可以绝对地在左侧空间中放置一个新列。如果浏览器视区很窄,您将看不到它,如果它很宽,它将完全可见并可用。唯一的问题是如果它在中间的一半-你的左栏将被切断-这可能看起来有点混乱!

另一种选择是使用javascript检测视区的宽度,并且仅在有空间时显示列?

Kevin Brown 16 年前

或者,您可以将两个“浮动”分隔符放在一个设置为“最大宽度”的容器分隔符中,并将“溢出”设置为“隐藏”。

这是最简单的方法!

也就是说,有这样的效果:

<div id="wrap">
<div id="left></div>
<div id="center"></div>
<div id="right"></div>
</div>

CSS:

#wrap{
    width:800px;
    overflow:hidden;
}