Html 如何将 css max-left 或 min-left 位置置于绝对对象?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17266459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to put css max-left or min-left position to absolute object?
提问by zur4ik
I have an element with:
我有一个元素:
position:absolute;
left: 70%;
can I configure element for example to not move from left more than 900px? something like max-width but for positioning?
例如,我可以将元素配置为不向左移动超过 900 像素吗?类似于 max-width 但用于定位?
回答by Uxio
You can use CSS3 Media Queriesto achieve that
您可以使用CSS3 媒体查询来实现
So:
所以:
#element {
position:absolute;
left: 70%;
}
If you don't want it to overlay an object when you have a smaller screen or resize the window, you can add after that:
如果您不希望它在屏幕较小或调整窗口大小时覆盖对象,则可以在此之后添加:
@media all and (max-width: 980px) {
#element{
margin-left: 0px;
left: 220px;
}
}
When the screen width is less than 980px, the #elementobject will be fixed to 220px.
当屏幕宽度小于980px,所述#element对象将被固定到220px。
回答by BBagi
The only way to do this with CSS is to remove the absolute positioning, and float it to the right.
使用 CSS 做到这一点的唯一方法是删除绝对定位,并将其向右浮动。
Put an empty "pusher" div, floated left. Give it a width of 70%, and a min-width of 900px; Then float your element beside it.
放一个空的“pusher”div,向左浮动。给它一个 70% 的宽度,一个 900px 的最小宽度;然后将您的元素浮动在它旁边。
Otherwise you'll have to use Javascript.
否则,您将不得不使用 Javascript。
回答by matthijs koevoets
Alternatively you could wrap the absolutely positioned element with a relatively positioned element which has a min-width.
或者,您可以使用具有最小宽度的相对定位元素包装绝对定位元素。