0

我正在尝试创建一个 HTML 页面滑块，所以我有我的容器 div，然后坐在外面，在左边我有一个上一个图标，在右边我有一个下一个图标。

我的问题是，当我将窗口调整为较小的屏幕时，图标会移动到容器的中心，我希望它们在调整大小时始终保持固定在容器外部的位置。

我的容器代码：-

width: 960px;
margin: 0 auto;
clear: both;
overflow: hidden;
min-height: 449px;

下一个和上一个代码：

a.vehicleSliderLeft {background: url('../img/slider_arrow_left.png'); 
             width: 55px; height: 112px; left: 270px; background-position:0px; 
             background-repeat: no-repeat; position: fixed; top: 420px;}    

a.vehicleSliderRight {background: url('../img/slider_arrow_right.png'); 
             width: 55px; height: 112px; right: 270px; background-position:0px; 
             background-repeat: no-repeat; position: fixed; top: 420px;}

有任何想法吗？干杯

4

3 回答 3

1

You should try something like this:

.container{
    width: auto;
    margin: 0 auto;
    clear: none;
}

a.vehicleSliderLeft {
    float: left;
}    

a.vehicleSliderRight {
    float: right;
}

Fiddle: http://jsfiddle.net/EhdkP/1/

于 2012-12-03T16:00:54.187 回答
1

您需要提供主容器position: relative，然后使用 . 将箭头元素放置在容器内position: absolute。

right: x , left: x , top: x , bottom: x.然后，这允许您使用x 是任何数字或百分比来操纵将两个箭头放在页面上的位置。

jsFiddle：http: //jsfiddle.net/LZG3R/3/

来源：十步学习 CSS 位置

于 2012-12-03T16:03:40.513 回答
0

在主 div 中，您可以将每个元素保存在单独的 div 中，指定每个 div 的位置，指定宽度的百分比

于 2012-12-03T15:36:06.497 回答