css - 如何设置宽度以打开浏览器滚动条并停止折叠页面上的元素-6ren

css - 如何设置宽度以打开浏览器滚动条并停止折叠页面上的元素

转载作者：行者123 更新时间：2023-11-28 14:24:32

我正在我的页面顶部创建一个横幅。它使用 3 个包含内容的横幅构建。当我水平缩小浏览器窗口时，我的绿色横幅组件(右侧)随着屏幕边缘移动，最终重叠或进入我的蓝色横幅组件(左侧)下方。

如何设置浏览器(正文？)宽度，使右侧的横幅随着浏览器缩小而停止移动，而是启用浏览器滚动条以使页面停止缩小？

如果有完全不同/更好的方法来解决这个问题，请向我提出所有建议。尽可能多地学习。

非常感谢您的帮助。我的代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <style media="screen" type="text/css">

    .bannerBackground
        {
        width: 100%;
        position: absolute;
        top: 0;
        height: 27px;
        background-color: orange;
        }

    .rightBanner
        {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 9;
        height: 27px;
        padding-right: 20px;
        width: 200px;
        text-align: right;
        color: #CCCCCC;
        font-size: 20px;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        font-weight: bold;
        background-color: green;
        margin:0;
        display: block;
        }

    .leftBanner
        {
        white-space: nowrap;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10;
        white-space: nowrap;
        margin-bottom: 0px;
        width: 645px;
        background-color: blue;
        height: 27px;
        display: block;
        }

    body
        {
        font-family: arial;
        margin: 0;
        padding: 0;
        color: #EEEEEE;
        }
</style>
</head>

<body>

        <div class="leftBanner">
        </div>

        <div class="rightBanner">
            <div>
            Some Title Text
            </div>
        </div>

        <div class="bannerBackground">
        </div>

</body>
</html>

最佳答案

当您绝对定位元素时，您会将它们从页面流中移除。您可以改为使用 float 。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style media="screen" type="text/css">

.bannerBackground
    {
    width: 100%;
    height: 27px;
    background-color: orange;
    }

.rightBanner
    {
    z-index: 9;
    height: 27px;
    padding-right: 20px;
    width: 200px;
    text-align: right;
    color: #CCCCCC;
    font-size: 20px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-weight: bold;
    background-color: green;
    margin:0;
float: right;
    }

.leftBanner
    {
    white-space: nowrap;
    z-index: 10;
    white-space: nowrap;
    margin-bottom: 0px;
    width: 645px;
    background-color: blue;
    height: 27px;
float: left;
    }

body
    {
    font-family: arial;
    margin: 0;
    padding: 0;
    color: #EEEEEE;
min-width: 960px;
    }
</style>
</head>

<body>

    <div class="leftBanner">
    </div>

    <div class="rightBanner">
        <div>
        Some Title Text
        </div>
    </div>

    <div class="bannerBackground">
    </div>

</body>
</html>