Question

好吧，这应该很简单。基本上，我在这里要做的是为旋转木马图像库创建布局。 JSFiddle就在这里......

... 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>

这很简单，我一直不敢问，因为害怕错过一些简单的东西。我在网上看了一下，我简直无法弄清楚为什么这个简单的边距不起作用。

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

出于某些奇怪的原因，第一张图片不想向左移出图像。请帮忙！

先谢谢！

P.S。标签的末尾位于标签前面，以防止在代码中出现换行符时图像之间出现小空间。

Answer 1

首先，在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

Answer 2

从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>

CSS负边距不起作用？

2 个答案: