gpt4 book ai didi

html - 固定元素左对齐到主列

转载 作者:可可西里 更新时间:2023-11-01 13:07:37 26 4
gpt4 key购买 nike

我不确定是否可以使用纯 CSS 来完成。站点结构如下所示:

<body style="text-align:center;">
<div style="max-width:1000px; margin: 0 auto;" id="mainWraper">
<div id="fixedBox" style="position:fixed; top:100px; left:0;"></div>
</div>
</body>

我想要做的是使 fixedBox 元素始终从顶部屏幕显示 100px 并与 mainWraper 的左侧对齐。mainWraper 响应最大宽度 - 1000px;

我知道它可以用 JS 来完成,但我也可以只用 css 来完成吗?

最佳答案

如果容器的宽度小于 1000px,则框将与视口(viewport)左对齐。否则,它将与容器左对齐:

#fixedBox {
position: fixed;
left: 50%;
/* move it back half the width of your mainWrapper */
margin-left: -500px;
}

@media screen and (max-width: 999px) {
#fixedBox {
left: 0;
margin-left: 0;
}
}

演示

Try before buy

关于html - 固定元素左对齐到主列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30460906/

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