标签: positioning

我找到了这个主题 - 如何在保持图像宽高比的同时拉伸图像以填充<div>？ - 这不完全是我想要的东西.

我有一个特定大小的div和里面的图像.无论图像是横向还是纵向,我都希望始终用图像填充div.如果图像被切断(div本身隐藏了溢出)并不重要.

因此,如果图像是肖像我希望它width是100%,height:auto所以它保持成比例.如果图像是风景我想要的height是100%和width to beauto`.听起来很复杂吧？

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

由于我不知道该怎么做,我只是简单地创建了我的意思的快速图像.我甚至无法正确描述它.

所以,我想我不是第一个问这个的人.但是我无法真正找到解决方案.也许有一些新的CSS3方式这样做 - 我想的是flex-box.任何的想法？也许它比我预期的要容易得多？

我有一个位置的元素:固定,因此滚动页面我不知道如何.当用户向上滚动时,我希望元素在某一点停止滚动,比如当它距离页面顶部250px时,这可能吗？任何帮助或建议都会有所帮助,谢谢!

我有一种感觉,我需要使用jquery这样做.我尝试获取用户所在位置的滚动或位置,但真的很困惑,是否有任何jquery解决方案？

在CSS中,静态(默认)定位和相对定位有什么区别？

我需要将我的页脚固定到页面底部并使其居中.页脚的内容可能会一直发生变化,因此我无法通过margin-left将其居中:xxpx; margin-right:xxpx;

问题是由于某种原因,这不起作用:

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

我抓了网,一无所获.我试着制作一个容器div和nada.我尝试了其他组合和gurnisht.我怎样才能做到这一点？

谢谢

我有一个定位的div,其内容可能太长,所以滚动条出现(overflow:auto设置).它在ajax应用程序中用作对话框.我想在它的右上角修复一个关闭按钮,所以当用户滚动div时它不会滚动.

我尝试了它,position:fixed; right:0; top:0但它把按钮放在页面的右上方而不是div(在firefox中).

是否可以使用CSS进行此按钮放置而不会在每次滚动事件中使用js中的offsetWidth/Height进行黑客攻击？

ps:div的高度和宽度不是固定值,它取决于内容的大小和浏览器窗口的大小.用户也可以根据需要调整大小.

如何水平居中可变宽度的浮动元素？

编辑:我已经使用了包含div浮动元素并width为容器指定了一个(然后margin: 0 auto;用于容器).我只想知道是否可以在不使用包含元素的情况下完成,或者至少不必width为包含元素指定a .

在其父窗体的中心显示一个DialogBox是一团糟.这是一个显示对话框的方法.

我将其父级定位到中心,但无法使DialogBox居中

private void OpenForm(Object point, Object height, Object width)
{
    FormLoading frm = new FormLoading();
    Point temp = (Point)point;
    Point location = new Point(temp.X + (int)((int)width) / 2, 
                               temp.Y + (int)((int)height) / 2);
    frm.Location = location;
    frm.ShowDialog();
}

private void btnView_Click(object sender, EventArgs e)
{
    try
    {                    
        ThreadStart starter= delegate { OpenForm(currentScreenLocation, 
                                                 this.Height, this.Width); };
        Thread t = new Thread(starter);
        t.Start();
        ////// Some functionality here...
        t.Abort();
    }
    catch (Exception)
    {
    }
}

我有一个奇怪的问题.在我的页面上,我有一个行星在一些重型星云中的主要图像.我设置它所以最小宽度是1000px,最大是1500px.我的侧面逐渐消失,大屏幕看起来很棒.我想尝试做的是当你在移动设备上查看它并且它切割1000像素的宽度时,我想图像说1300像素宽,居中并且切割150像素在每一侧,你都看不到淡出,但仍然可以放大,窗户的宽度变得更大,就像一个大的iMac一样,一旦你通过1300像素的宽度,那么褪色就会再次变得可见.

我最初的想法是在任何一方做一些带有负边距的东西,但是在保持最大和混合宽度的同时我无法使用它.

这是来自页面的特定代码段,虽然html和css就在那里供所有人查看,但您可以使用精细命令找到任何进一步查找的div ID.

<div style="position:relative;width:100%;">
   <div id="help" style="
      position:relative;
      z-index:1;
      height:100%;
      min-width: 1000px;
      max-width: 1500px;
      margin: 0 auto;
   ">
      <img src="http://i.stack.imgur.com/tFshX.jpg" border="0" style="width:100%;">
   </div>
</div>

对此有任何想法,它非常接近我喜欢的方式,只需要一个小小的调整.

是否可以通过元素的中心点而不是左上角来告诉代码？如果我的父元素有

width: 500px;

而我的孩子元素有

/*some width, for this example let's say it's 200px*/
position: absolute;
left: 50%;

可以假设,基于50%定位,子元素将位于父元素的中间,150px每侧留下自由空间.然而,它不是,因为它是孩子的​​左上角,50%达到了父母的宽度,因此整个孩子的宽度200px从那里向右移动,留下250px左边的自由空间,只50px留在右边.

所以,我的问题是,如何实现中心定位？

我找到了这个解决方案

position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;

但我不喜欢它,因为你需要为每个元素的宽度手动编辑它 - 我想要一些全局工作的东西.

(例如,当我在Adobe After Effects中工作时,我可以为对象设置位置,然后设置将放置到该位置的该对象的特定锚点.如果画布是1280px宽的,则将对象定位到640px您选择对象的中心作为锚点,然后整个对象将在1280px宽画布中居中.)

我会在CSS中想象这样的事情:

position: absolute;
left: 50%;
horizontal-anchor: center;

类似地,horizontal-anchor: right将元素放置在右侧,因此整个内容将从其父级50%宽度的点开始向左.

并且,同样适用vertical-anchor,你得到它.

那么,这样的事情可能只使用CSS(没有脚本)吗？

谢谢!

我需要这个,因为我想让菜单(由HTML列表制作)水平显示.

我不喜欢使用绝对定位,因为当我开始更改页面布局时它可能会变得混乱.

我还想删除子列表的缩进.可能吗？