0

好吧，这应该很简单。基本上，我在这里要做的是为轮播图片库创建布局。JSFiddle 在这里...

http://jsfiddle.net/G5Us4/1/

CSS...

.gallery {

margin-left: auto;
margin-right: auto;
width: 600px;
background-color: #000000;
height: 300px;
overflow: hidden;
white-space: nowrap;

}

.image {

margin-right: 300px;
margin-top: 50px;
position: relative;
height: 200px;

}

#image {

margin-left: -600px;
width: 287px;

}

#image-two {

width: 231px;

}

#image-three {

width: 242px;

}

HTML...

<div class="gallery"
    ><img src="../images/templateone.jpg" id ="#image" class="image" alt=""
    /><img src="../images/templatetwo.jpg" id="#image-two" class="image" alt=""
    /><img src="../images/templatethree.jpg" id="#image-three" class="image" alt=""/>
</div>

它是如此简单，我一直不敢问，因为害怕错过一些愚蠢的简单的东西。我在网上环顾四周，我根本无法弄清楚为什么这个简单的边距不起作用。

我想要得到的效果是所有图像都在一条水平线上，右边距很大，将它们与其他图像分开。现在我已经完成了，我需要在第一个图像上添加一个负边距，以便最后一个图像从舞台的中心开始，另外两个在左侧隐藏之外。

出于某种奇怪的原因，第一张图片不想超出左侧的图片。请帮忙！

先谢谢了！

标记的 PS 结束在标记的前面，以防止在代码中有换行时出现图像之间的小空间。

4

2 回答 2

2

首先，在您的 HTML 中更改id="#image-three为。id="image-three"也删除#图像一和二。

<img src="../images/templateone.jpg" id ="image" class="image" alt=""/>
<img src="../images/templatetwo.jpg" id="image-two" class="image" alt="" />
<img src="../images/templatethree.jpg" id="image-three" class="image" alt=""/>

其次，要按照您的描述进行操作，只需增加负边距即可。

#image {
margin-left: -920px;
width: 287px;
}

见- jsFiddle

于 2013-07-12T05:29:00.507 回答
0

从您的 html 代码中的 ids 中删除 #，

<div class="gallery"
    ><img src="../images/templateone.jpg" id ="image" class="image" alt=""
    /><img src="../images/templatetwo.jpg" id="image-two" class="image" alt=""
    /><img src="../images/templatethree.jpg" id="image-three" class="image" alt=""/>
</div>
于 2013-07-12T05:49:26.787 回答