Panel 容器里的控件如何设置右对齐
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Panel 容器里的控件如何设置右对齐相关的知识,希望对你有一定的参考价值。
那要看你的布局方式了,比如流式布局FlowLayout.EAST(好像吧,记不清了) 参考技术A 还是里面控件的Dock设置成Right吧?我如何拥有一个固定的右对齐容器并使用父级滚动?
【中文标题】我如何拥有一个固定的右对齐容器并使用父级滚动?【英文标题】:How do I have a fixed right aligned container and use the parent to scroll? 【发布时间】:2019-12-19 00:21:32 【问题描述】:我有以下设置:
全宽,100px高header
标题始终在顶部可见。
全宽,剩余高度details
details
的内容可以垂直和水平滚动
一个固定的 200 像素宽、全高的容器与 details
右对齐。
详细信息容器控制滚动,右侧有填充以说明右对齐的冻结部分。
页面正文根本不滚动,只有details
容器。
这就是我想要的样子:https://jsbin.com/mowojix/5/edit?html,css,output。但是,一旦滚动,您会注意到右对齐的容器刚刚放置到位并随着滚动移动。在这里,我在可滚动容器内有右对齐的容器,以将其保持在滚动条内。
这就是我希望它发挥作用的方式:https://jsbin.com/mowojix/7/edit?html,css,output。但是,请注意右侧的容器位于滚动条上方。在这里,我在可滚动容器之外有右对齐的容器,因此它实际上可以保持浮动在右侧。
我想我在这里遗漏了一些简单的东西。有什么想法吗?
【问题讨论】:
【参考方案1】:希望这就是您想要的。仍然依赖浏览器滚动条并修复页眉和侧边元素。
body
margin:0;
padding:0;
.header
position:fixed;
top:0;
left:0;
height:100px;
width:100vw;
background:red;
.main
margin-top:100px;
background:lightblue;
max-height:calc(100vh - 100px);
max-width:100vw;
.main-content
width:200vw;
height:200vh;
background:blue;
.side
position:fixed;
right:0;
top:100px;
background:green;
width:200px;
height:60vh;
<body>
<div class="header">
Header
</div>
<div class="main">
<section class="main-content">Main content area</section>
<section class="side">Side</section>
</div>
</body>
【讨论】:
啊,很抱歉不清楚,但这不是我要找的。我需要一个固定在容器右侧的元素,而不是页面。 @bunkscene 将您的容器分成另一个 div,无论您希望它在页面中的大小如何,如果在容器中仍然正确,则添加上述解决方案。 @Mugé Position: fixed 仅相对于页面。您可以使用transform
添加一个 hack 来更改视口,但它仍然无法正常工作。以上是关于Panel 容器里的控件如何设置右对齐的主要内容,如果未能解决你的问题,请参考以下文章