问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使一个 div 粘在父级的右边缘并与父级中的其他部分重叠

社区维基
1
新手上路，请多包涵

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

这张图片讲述了这个故事

在此处输入图像描述

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

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

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

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

原文由 Tharindu Thisarasinghe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 448
2 个回答
得票最新
社区维基
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>

原文由 Asons 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

这是最简单的方法。在右侧给你的外框一个填充，并通过给它相同的宽度并将它绝对定位到右边来让内框填充填充。

 <!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>

原文由 Swimburger 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题