Question

当我在每个缩略图上进行每次悬停时，是否有一种方法可以阻止每个缩略图逐渐将文本推向右侧？您知道，每个缩略图的文本始终保持在相同的位置。

因为目前它this：

我希望文本保留在所有图像的一个位置，而不是逐渐向右移动。

以下是代码：

HTML

 <div class="gallery_preview">
 <img name="preview" src="images/IMAGE GALLERY 1.png" alt="" />
 </div>

 <div class="gallery_thumbnails">
 <div class="imagebox">   
 <img onmouseover="preview.src=img1.src" name="img1" src="images/IMAGE GALLERY 1.png" alt="" />
 <div class="text">Caption for image.</div>
 </div>

 <div class="imagebox">
 <img onmouseover="preview.src=img2.src" name="img2" src="images/IMAGE GALLERY 2.png" alt="" />
 <div class="text">Caption for image.</div>
 </div>

 <div class="imagebox">
 <img onmouseover="preview.src=img3.src" name="img3" src="images/IMAGE GALLERY 3.png" alt="" />
 <div class="text">Caption for image.</div>
 </div>

 <div class="imagebox">
 <img onmouseover="preview.src=img4.src" name="img4" src="images/IMAGE GALLERY 4.png" alt="" />
 <div class="text">Caption for image.</div>
 </div>

<div class="imagebox">
 <img onmouseover="preview.src=img5.src" name="img5" src="images/IMAGE GALLERY 5.png" alt="" />
 <div class="text">Caption for image.</div>
 </div>
 </div>

 </div>

CSS

.gallery_thumbnails img {
 height: 60px;
 width: 106px;
 padding: 1px;
 position: relative;
 }

.gallery_thumbnails img:hover {
 border: 3px solid #a22b2f;
 cursor: pointer;
 }

.gallery_preview img {
 padding: 1px;
}

.imagebox {
 display: inline-block;
 vertical-align: top;
 }

.text {
 display: none;
 margin:-100px;
 margin-left:-150px;
 font-family:Arial, Helvetica, sans-serif; 
 font-size:16px;
 color:white;    
 }

Answer 1

~~当你说文字时，你是在引用.text吗？不确定我理解这个问题，但是，如果我这样做，你不会通过给予上课绝对位置来解决你的问题吗？~~

http://jsfiddle.net/du7340L4/2/我改变了你的小提琴，让你知道你应该做些什么！

.gallery_thumbnails {
    position: relative;
}

为了给出任何绝对定位，它需要在静态或相对元素内部！

完成后，您可以将position: absolute;提供给.text类。

希望它有所帮助，让我知道！同时，如果你正在学习CSS，那么了解位置属性是至关重要的。静态，相对和绝对定位起初可能很棘手但你会得到它的悬念;）

图像库上的文本对齐方式

1 个答案: