即使溢出被隐藏，DIV也会被拉下来

Question

我有一个标题，它有两个部分，左边 - 大面包屑，右边 - 控制按钮。问题 - 当面包屑太长时，右侧部分会下降，但我想隐藏面包屑，不是全部，而是隐藏按钮的部分。下面是短面包屑的图像

目前父div是

width: auto;
text-align: left;
margin-left: 61px;

面包屑是

display: inline-block;
text-align: left;
width: auto;
max-width: 60%;
overflow: hidden;
white-space: nowrap;

右键部分是

z-index: 99999;
float: right;
display: inline-block;

我不知道为什么右侧部分被拉下来，我只想隐藏面包屑，也无法在chrome dev工具中解决它。 这就是我要的， 也许有一个小技巧，注意到css display的许多变化，任何想法？

蹩脚的演示： http://jsfiddle.net/a796joeq/

Answer 1

我建议使用“右键部分”：

z-index: 99999;
position: absolute;
right: 0px;
top: 0px;
display: inline-block;

Answer 2

尝试遵循正确的概念，以便提供高质量的输出。

您可以使用float概念来实现此目的。为了更好地理解，您最初可以使用宽度。

父母div使用：100％;对于儿童div使用：50％，50％（总计可以最多100％）

以下是小提琴（http://jsfiddle.net/kiranvarthi/ybt5tc8b/3/）：

.parent { width: 100%; background: green; overflow: hidden; }
.child1 { width: 30%; float: left; color: #fff; }
.child2 { width: 30%; float: left; color: #fff; }

HTML

<div class="parent">
  <div class="child">
    Child 1 content comes here.
  </div>
  <div class="child">
    Child 2 content comes here.
  </div>
</div>

Answer 3

问题是你在父div上margin-left。将其更改为百分比

Answer 4

为你的div提供职位：

Parant Div：

position:relative;

面包屑：

position:absolute;

Answer 5

添加媒体查询：

@media screen and (max-width: 800px) {
  .breadcrumb {
    max-width: 50%;
  }
}
@media screen and (max-width: 750px) {
  .breadcrumb {
    max-width: 40%;
    }
}