大佬教程收集整理的这篇文章主要介绍了css – 如何定位未知宽度的绝对定位内容？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在画一幅绘画的观众,这些绘画应该能够拉伸来填满页面,90％的屏幕高度是精确的.我想将画作一个一个地淡化,并将每个画面放在屏幕的中央.
为了使画面相互淡化,我需要将它们定位为“绝对”,以阻止它们的堆叠.这里是麻烦来了.自从我将它们设置为绝对值之后,我用来集中包含div的所有方法都没有起作用.
问题的一部分是,我没有为画画设置任何宽度,因为我希望他们动态调整大小以填充用户屏幕的90％.
我已经找到了数百种绝对内容中心的方法,并相信我可能需要收缩包装的div.不过我还没有成功.
HTML的
<div id="viewer_div">
<img src="" id="first" />
<img id="second" class="hidden"/>
</div>
样式表
#viewer_div {
width:1264px;
}
img {
height:90%;
display:block;
margin-left: auto;
margin-right:auto;
}
上面给了我想要的效果,但不允许我将图像定位为绝对的.任何人都可以提出以图像为中心的方式,但也允许我在另一方面褪色？
使用CSS黑客将元素左右移动50％
或者不要绝对定位.
这个答案是非常短暂的,但正是这一点.如果您需要某些内容集中(意味着您希望浏览器确定中心点在哪里,并将其定位在那里),那么您将无法使用绝对定位 – 因为它会从浏览器中消除控制.
这是你的问题所在.你假设你需要绝对定位错误的原因.
如果您将元素放置在彼此顶部时遇到问题,请将图像包装在绝对定位的容器中,该容器的宽度为100％,并且具有text-align：center
如果您确实需要绝对定位,则可以使用以下hack来实现所需的结果：
div {
position: absolute;
/* move the element half way across the screen */
left: 50%;
/* allow the width to be calculated dynamically */
width: auto;
/* then move the element back again using a transform */
transform: translateX(-50%);
}
显然,上述黑客有一个非常糟糕的code smell,但它在一些浏览器上起作用.请注意：对于其他开发人员或其他浏览器(尤其是IE或移动设备)来说,此黑客未必是明显的.
以上是大佬教程为你收集整理的css – 如何定位未知宽度的绝对定位内容？全部内容，希望文章能够帮你解决css – 如何定位未知宽度的绝对定位内容？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。