在响应式网站中与半透明div重叠

Question

我一直在研究一个自我项目,使用可用的JSON数据复制javascript的reddit页面.但我无法复制原始网站的行为header section,其中header响应(屏幕尺寸减小时的行为).

GIF:原始网站标题部分的工作原理.

问题 :

1. 在左侧重叠右侧(登录页面选项).重叠使得后面的文本未显示.我已经成功地做到了重叠,但由于背景的divs是translucent,在后面的文本也显示.想不出任何解决方案.

GIF:我的标题(在文字后面看到)

2. navbar elements当空间不足时,超越下来.这不是它是如何在原,在那里他们得到了隐藏more和Login section.我无法弄清楚如何将它放在一排.

GIF:我的标题(标题元素向下移动)

---

一个较小的,类似的样本片段:

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7);       /* translucent */
    position:absolute;
    top:0;
    width: 100%;
}
#top-right-div{
    position: absolute;
    right: 0;
    z-index: 1000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>

<div class="navbar navbar-static-top custom-header-full">

    <!-- TOPMOST header with Links and Login/Signup -->
    <div class="navbar-header custom-top-header-container">
        <!-- Left side with various links -->
        <div id="top-left-div">
            <a class="navbar-brand" href="#">MY SUBREDDITS ?</a>
            <a class="navbar-brand" href="#">POPULAR</a>
            <a class="navbar-brand" href="#">ALL</a>
            <a class="navbar-brand" href="#">RANDOM</a>
        </div>

        <!-- Login/Signup on the right -->
        <div id="top-right-div">
            <span class="navbar-brand">Want to join?
                <a href="#">Log in or sign up</a>
                in seconds |
                <button class="glyphicon glyphicon-wrench tools-icon"></button>
            </span>
        </div>

    </div>
</div>

如果你想检查整个项目,Github上的链接.

值得注意的一点:在标题中,左侧titles与右侧重叠section.因此,这是一种平滑的交易,其中可能性使得在重叠时甚至可以在标题中看到部分文本.基本上它不是要使标题元素被宽度看不见,因为这会使整个title看不见.

例如:

• 标题有 TODAYIL

• 标题有TODAYILEARNED(整个标题)

Answer 1

如果你能够使用CSS flexbox,我认为这个解决方案可以按照你想要的方式工作:

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7);       /* translucent */
    position:absolute;
    top:0;
    width: 100%;
    display: flex;
}
#top-left-div {
    flex: 1 1 0%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
}
#top-right-div{
    flex: 0 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>

<div class="navbar navbar-static-top custom-header-full">

    <!-- TOPMOST header with Links and Login/Signup -->
    <div class="navbar-header custom-top-header-container">
        <!-- Left side with various links -->
        <div id="top-left-div">
            <a class="navbar-brand" href="#">MY SUBREDDITS ?</a>
            <a class="navbar-brand" href="#">POPULAR</a>
            <a class="navbar-brand" href="#">ALL</a>
            <a class="navbar-brand" href="#">RANDOM</a>
        </div>

        <!-- Login/Signup on the right -->
        <div id="top-right-div">
            <span class="navbar-brand">Want to join?
                <a href="#">Log in or sign up</a>
                in seconds |
                <button class="glyphicon glyphicon-wrench tools-icon"></button>
            </span>
        </div>

    </div>
</div>

我做了什么:

1. 请.custom-top-header-container display:flex确保左侧和右侧显示并排侧.
2. 请#top-right-div永远只占用空间,其内容需求(即不扩大或缩小)
3. 请#top-left-div填写任何空间留在容器中,并使用overflow:hidden隐藏可能有重叠的任何内容#top-right-div上的小宽度.
4. 设置#top-left-div为white-space: nowrap防止带有空格的链接(如"我的Subreddits")在屏幕缩小到足够小时分成多行.

Answer 2

我已经设法实现了一个纯CSS解决方案而没有flex我想你想要的.

我将重点介绍我所做的一些改变(那些与问题没有直接关系并因此可能被忽视的改变):

• 摆脱了.navbar,.navbar-static-top,.navbar-header,.custom-header-full和.custom-top-header-container.如果您确实需要这些课程,请找到一种在您自己的时间覆盖行为的方法.如果证明太困难,我可以尝试帮助.
• 从源中删除了CAPS LOCK并将其替换text-transform: uppercase;为CSS文件内部.如果在添加新导航链接时碰巧入睡,这对将来真的有帮助.
• 用HTML实体替换"▼"(▼).现代浏览器通常不关心,但它仍然是很好的做法.

这是最终结果的小提琴.如果您有任何疑问,请告诉我.

Answer 3

对于重叠，您可以使用这种样式：

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7); 
    position:absolute;
    top:0;
    width: 100%;
}
#top-right-div {
    width: 45%;
    float: left;
}

#top-left-div {
    display: inline-block;
    width: 53%;
    float: left;
}

喜欢：演示

以及您可以使用媒体查询的其他设备，例如：

 @media (min-width:0px) and (max-width:799px) { add style  }

根据设备编写样式。

我认为这对你有帮助。