3

想知道为什么定位 div 以保持响应性如此困难.. 由于某种原因，它们只是漂浮在他们想要的任何地方.. 我怎样才能完美地定位这些？像我的社交图标一样调整大小时保持自己的位置http://www.closetvip.com/splash.html

/* Menu Buttons */
#english {
    float:right;
    position:absolute;
    right:570px;
    bottom:101px;
    clear:right;

}
#spanish {
    position:absolute;
    left:570px;
    bottom:100px;
    clear:right;

}


<div id="spanish">
    <img src="img/espanol.png">
</div>
<div id="english">
    <img src="img/english.png">
</div>
4

3 回答 3

1

您需要position: relative;在绝对 div 的父 div 上使用，否则项目是窗口的绝对值

于 2013-07-13T08:06:59.677 回答
0

我从来没有看到引导程序的使用，只是它包含在标题中，就是这样......

您将元素定位在右/左固定像素，并且取自窗口边框，因此当您调整窗口大小时，元素被推送是正常的。

您的社交图标位于右侧 0 位置，因此当您调整窗口大小时始终保持在右侧是正常的，但其他 2 个按钮有 570 像素，它们将始终保持该空间，因此当您调整大小时，您知道发生了什么。

你问的解决方案？

您可以使用以下方式定位它们：

#spanish { bottom: 100px; clear: right; left: 50%; margin-left: -150px; position: absolute;} 
#english { bottom: 101px; clear: right; float: right; left: 50%; margin-left: 50px; position: absolute;}
于 2013-07-13T08:20:08.817 回答
0

您必须通过媒体查询来控制它或在您的 css 规则中使用 % ，例如

#spanish {
    position:absolute;
    left:47%;
    bottom:20%;
    clear:right;

}

注意：这不是最终的只是一个例子这些是来自 chris coyier 参考 url的一些标准媒体查询

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

使用这些并为所有设备设置元素的位置

于 2013-07-13T08:22:17.737 回答