gpt4 book ai didi

html - polymer 布局和 "position: fixed"问题

转载 作者:太空宇宙 更新时间:2023-11-03 17:58:35 24 4
gpt4 key购买 nike

我目前正在学习 polymer 并遇到以下问题:

我想要一个拆分布局,其中左侧是元素列表,右侧可以显示有关所选元素的其他信息。

我尝试使用以下(简化的)代码实现此目的:

<body fullbleed vertical layout>

<style type="text/css">
.card_container {
margin: 16px;
position: relative;
}
.details_container {
/* position: fixed;
*/ }
.white-bg {
background-color: white;
margin: 8px;
max-width: 650px;
}
.white-bg.details {
margin: 24px 24px;
}
</style>

<div layout horizontal center-justified>
<div id="card_container" class="card_container" layout vertical>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
</div>

<div class="details_container" layout vertical flex>
<div class="white-bg details" flex relative>
<p>Some sample text...</p>
</div>
</div>
</div>

</body>

布局看起来相当不错,直到我将 position: fixed 分配给 details_container div。

我创建了一个 JSBin 来演示问题:http://jsbin.com/ziqayufojeco/2/edit?html,output只需取消注释 position: fixed; 属性即可。

有什么解决办法吗?

最佳答案

我实际上不知道规范说的是什么,但我并不惊讶您不能将 flexposition: fixed 结合使用。

flex 属性(这是 CSS flex 属性的简写)告诉 CSS 如何相对于它的同级元素定位和调整元素的大小。 OTOH,position: fixed 告诉 CSS 您希望元素非常具体地定位。

我可以理解,无论 position: fixed 是什么,您都希望计算出的大小相同,但这种方式行不通。我想提出一个替代方案,但我无法弄清楚您想要的结果是什么。

关于html - polymer 布局和 "position: fixed"问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25825691/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com