时间戳

首页 > 解决方案 > 溢出时隐藏元素

html - 溢出时隐藏元素

问题描述

在我的导航栏中，我有两个图像（1 个用于徽标，1 个用于文本图像），但文本图像很长，当您在移动屏幕上查看其网页时，它将位于徽标下方。

两个图像合并为一个用于标题的导航栏

溢出时如何隐藏文本图像？

图像调整不正确，文本图像现在应该隐藏，因为它溢出了

谢谢！

这是我当前的代码（删除了不必要的代码）”

    #header-background {
        height: 108px;
        background-image: url('/images/header-background.png');
        background-position: center;
        background-size: 500px 108px;
        background-repeat: "repeat-y";
    }

    .sidebar-mini.sidebar-collapse .main-header .navbar {
        margin-left: 0px;
    }

    .main-header .navbar {
        margin-left: 0px;
    }
<header class="main-header">
    <nav class="navbar navbar-static-top" role="navigation">
        <div>
            <div id="header-background">
            </div>

            <div style="position: absolute; left: 40px; top: 0px; right: 88px; overflow: hidden;">
                <img src="/images/header-logo-only.jpg" alt="logo banner" height="108"></img> <!-- LOGO -->
                <img src="/images/header-text-only.jpg" alt="text banner" height="108"></img> <!-- TEXT IMAGE THAT IS LOOOOONG -->
            </div>
        <div>
    </nav>
</header>

标签： htmlcssnavbar

解决方案

您可以使用 css 中的媒体概念来更改网站的外观。

@media (max-width: value_px){
    css code
}
@media (max-width: value_px){
    css code
}

推荐阅读