Question

我需要在其父div的右边缘放置一个div棒，当重新调整浏览器窗口大小时，它应该与同一父节点中的其他元素重叠，并且它们应该被隐藏。

此图片讲述了故事

请注意，我不希望div有固定的位置。它应该像其他人一样滚动，元素（文本或其他）应该在它下面。就像附图一样。

我尝试了以下代码但是，它使红色div粘在其祖父母的边缘。

.redarea{
    position:absolute;
    float:right;
}

完成这项工作的方法是什么？

Answer 1

这个完全符合您的要求

#parent{
  border:1px solid red; 
  width:100%; 
  height:60px; 
  position:relative;
  white-space: nowrap;
  overflow: hidden;
}

#rightchild{
  top: 0;
  width:100px; 
  right:0; 
  bottom: 0;
  background:red; 
  position:absolute;
}

<div id="parent" style="">
	<p>This area is getting hidden This area is getting hidden This area is getting hiddenThis area is getting hidden</p>
	<div id="rightchild">
	</div>
</div>

Answer 2

这是最简单的方法。给你的外盒在右侧有一个衬垫，让内盒填充衬垫，使其宽度相同，并将其绝对放在右边。

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <style>
      div.outer{
        width: 90%;
        height: 30px;
        padding-right: 30px;
        position: relative;
        border: 2px solid #ddd;
        margin: 0 auto;
      }
      div.inner{
        width: 30px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        background: red;
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>

</html>

＆＃13;

Answer 3

您也可以尝试使用display:inline-block。看到这个小提琴：https://jsfiddle.net/ahmadabdul3/sasc1a7h/

请记住，所有浏览器都不支持calc() css属性（尤其是较旧的浏览器）

Answer 4

感谢大家，使用了所有的帮助，我设法编写了这段代码。如果这是非法的，请告诉我。

#parent{
  border:1px solid red; 
  width:100%; 
  height:60px; 
  position:relative;
  overflow:hidden;
  white-space: nowrap;
}

#rightchild{
  width:100px; 
  right:0; 
  height:60px; 
  background:red; 
  position:absolute;
}

p{
   float:left;
}

<div id="parent" style="">
    <p>This area is getting hidden This area is getting hidden This area is getting hiddenThis area is getting hidden</p>
    <div id="rightchild">
    </div>
</div>

<强> Demo

Answer 5

你甚至不需要浮动它。你只需要：

position: fixed; right:0;

您可能还需要根据编码方式在其上指定z-index。如果它位于下方而不是顶部，请执行以下操作：

z-index:14;或类似的东西。

Answer 6

将文字保留在一行：white-space:nowrap。

显示应该可以帮助您避免使用position：table或flex：

＆＃13;

.flex {
  display: flex
}
.full {
  white-space:nowrap;
  }
.flex .full {
  flex: 1;
}
.table {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table p {
  display: table-cell;
}
p {
  border: solid;
}
.cds {
  padding: 0.25em;
  background: tomato;
  width: 100px;
  }

＆＃13;

<div class="flex">
  <p class="full"> text to spray in flex display  text to spray in flex display  text to spray in flex display </p>
  <p class="cds">condense</p>
</div>
<div class="table">
  <p class="full"> text to spray in table display text to spray in table display text to spray in table display</p>
  <p class="cds">condense</p>
</div>

＆＃13;

将div粘贴到父级的右边缘并与父级中的其他边缘重叠

6 个答案: