Css div标签不应占用空间_Css

Css div标签不应占用空间

css

Css div标签不应占用空间,css,Css,装饰延伸到包装外面一点。问题在于，如果浏览器视口为910px，则会出现垂直滚动条如何使装饰不占用空间，使垂直滚动条不出现编辑：查看此链接以了解我想要什么。这样就没有垂直滚动条了使用溢出：隐藏将剪辑部分装饰，使其不工作 <head> <style> #wrapper { width: 900px; position: relative; } #decoration

装饰延伸到包装外面一点。问题在于，如果浏览器视口为910px，则会出现垂直滚动条

如何使装饰不占用空间，使垂直滚动条不出现

编辑：

查看此链接以了解我想要什么。这样就没有垂直滚动条了

使用溢出：隐藏将剪辑部分装饰，使其不工作

<head>
    <style>
        #wrapper {
            width: 900px;
            position: relative;
        }
        #decoration {
            position: absolute;
            width: 542px;
            height: 126px;
            top: 0;
            left: 660px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <img id="decoration" src="/images/decoration.png" alt="" title="" />
        <div id="content">
            Some content
        </div>
    </div>
</body>

可以使用overflow:hidden；在包装器上

您可能希望在装饰图像周围包装一个div，并在其上设置overflow:hidden。设置溢出：根据您的布局，在包装上隐藏可能会导致剪切其他内容

如果它只是一个装饰，你应该试着用背景图像来做，那么你就不必担心剪辑。

你可能需要在装饰图像周围加上一个div，然后设置overflow:hidden。设置溢出：根据您的布局，在包装上隐藏可能会导致剪切其他内容

如果它只是一个装饰，您应该尝试使用背景图像，那么您不必担心剪辑。

如果它是一个装饰图像，也许您应该将其用作包装器上的背景图像，而不是HTML源代码中的背景图像，您仍然可以将其定位在660px的左侧，然后它将不会导致内容滚动条，因为它不是内容

#wrapper {
   width: 900px;
   position: relative;
   background: url(background.png) no-repeat 660px 0;
}

[澄清后更新]

好的，那么如果有空间的话，你想让装饰与包装重叠，比如弹出窗口

就是这样，试试这个

注意：保存背景图像的跨距应在包装外，跨距上没有宽度使用您的左坐标和右坐标：0；或者您喜欢右边的任何边距，并且仍然使用该图像作为背景图像。span可以放在HTML的底部，不碍事

如果它是一个装饰性图像，也许你应该将它用作包装器上的背景图像，而不是HTML源代码中的背景图像，你仍然可以将它放置在660px的左侧，它不会因为不是内容而导致内容滚动条

#wrapper {
   width: 900px;
   position: relative;
   background: url(background.png) no-repeat 660px 0;
}

[澄清后更新]

好的，那么如果有空间的话，你想让装饰与包装重叠，比如弹出窗口

就是这样，试试这个

您可以按照其他答案的建议设置overflow:hidden

但是，装饰图像不应该是CSS背景图像，而应该是CSS背景图像

像这样：

#wrapper {
    height: 126px;
    background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}

请参阅：

您可以按照其他答案的建议设置overflow:hidden

但是，装饰图像不应该是CSS背景图像，而应该是CSS背景图像

像这样：

#wrapper {
    height: 126px;
    background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}

请参阅：

您能为您的问题设置演示或屏幕截图吗？您能为您的问题设置演示或屏幕截图吗？不起作用。装饰的一部分将被剪掉，因为包装纸的右边框不能起作用。我想我的问题问得不好，装饰的一部分会被剪掉。这里有一个链接可以澄清：你是对的——你的问题有点不清楚。不过，在你澄清之后，我想我明白了。我添加了一个外包装，它有溢出：隐藏，最小宽度：500px。现在，装饰的突出部分不能导致滚动条出现。见：我想我的问题问得不好。这里有一个链接可以澄清：你是对的——你的问题有点不清楚。不过，在你澄清之后，我想我明白了。我添加了一个外包装，它有溢出：隐藏，最小宽度：500px。现在，装饰的突出部分不能导致滚动条出现。见：