Question

我一直在尝试为我的视频添加叠加播放图标，但是在添加此图片后，我的图片底行会产生奇怪的1px间距

当从（#icon）中移除绝对定位时，图像完美对齐 - 但当添加回来时，它会增加奇怪的间距

有人可以帮忙吗？

代码：http://www.codeply.com/go/JC75OR4xpD

HTML CODE：

<div class="instaVideos">
            <h1>Short Videos</h1>

                <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/11661388_407770589406910_367605487_n.mp4" class="html5lightbox">
                    <img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11325016_1163164417043690_1908545167_n.jpg"/>
                    <img id="icon" src="img/youtubePlayIcon.png"/>
                </a>


                <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xtp1/t50.2886-16/1489765_333969910114258_1680134671_n.mp4" class="html5lightbox">
                    <img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/10706968_601233316654119_1567865956_n.jpg"/>
                    <img id="icon" src="img/youtubePlayIcon.png"/>

                </a>

                <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/10679292_519402934860781_468618633_n.mp4" class="html5lightbox">
                    <img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/10665576_441425795996740_1661178998_n.jpg"/>
                    <img id="icon" src="img/youtubePlayIcon.png"/>

                </a>

                <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10641919_684721938283340_2079757675_n.mp4" class="html5lightbox">
                    <img src="https://igcdn-photos-g-a.akamaihd.net/hphotos-ak-xap1/t51.2885-15/924582_890120924350870_1658010424_n.jpg"/>
                    <img id="icon" src="img/youtubePlayIcon.png"/>

                </a>


                <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10541299_371884109631916_1548975081_n.mp4" class="html5lightbox">
                    <img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xpa1/t51.2885-15/10538735_664550930296554_1249448005_n.jpg"/>
                    <img id="icon" src="img/youtubePlayIcon.png"/>

                </a>

                <a href="https://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/11683107_112731029066100_1538573428_n.mp4" class="html5lightbox">
                    <img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/11386568_1455668744729300_108311835_n.jpg"/>
                    <img id="icon" src="img/youtubePlayIcon.png"/>

                </a>

                <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10721731_1471532036461241_1447645097_n.mp4" class="html5lightbox">
                    <img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xpa1/t51.2885-15/10724656_765518650158719_1752400817_n.jpg"/>
                    <img id="icon" src="img/youtubePlayIcon.png"/>

                </a>

                <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfa1/t50.2886-16/11679305_467034590127593_1579081935_n.mp4" class="html5lightbox">
                    <img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11429736_699224963557660_1457167025_n.jpg"/>
                    <img id="icon" src="img/youtubePlayIcon.png"/>

                </a>

        </div>

CSS：

.instaVideos {
            margin:0 auto;
            margin-left: auto;
            margin-right: auto;
            max-width: 800px;
            width:90%;
            text-align: center;
            margin-bottom: 50px;
            transition:all .2s ease-in-out;

        }


        .instaVideos > h1 {
            margin:0 auto;
            text-align: left;
            width:300px;
            margin-left: 2%;
            font-size: 30px;
            font-family: 'raleway';
        }

        .instaVideos > a > img {
            width:150px;
            height:auto;
            margin-top: 5px;
            border:1px solid red;
            text-align: center;
        }


        .instaVideos a:hover {
            opacity: 0.7;
        }


        .instaVideos > a {
            position:relative;
        }



        #icon {
            width:auto;
            height:30px;
            position:absolute !important;
            left:35%;
            top:0px;
            right:0px;
            display:inline !important;
        }

解决

我通过以下方式解决了这个问题：

.instaVideos {
    position:relative;
}

#icon {
 position: absolute;
 left:0;
 right:0;
 top:0;
 margin: 0 auto;
}

Answer 1

也许这有助于您：Fiddle

CSS：

var query = PFQuery(className: "Cats")
    query.orderByDescending("objectId")

    query.findObjectsInBackgroundWithBlock ({( objects:[AnyObject]?, error: NSError?) in
        if(error == nil){

            //let imageObjects = objects as! [PFFile]


                //if (rightSwipe.direction == .Right) {
                    let randomNumber = Int(arc4random_uniform(UInt32(objects!.count)))
                    println(randomNumber)


                for object : PFObject in objects as! [PFObject] {

                    let thumbNail = object["image"] as! PFFile
                    println(thumbNail)

                thumbNail.getDataInBackgroundWithBlock({
                    (imageData: NSData?, error: NSError?) -> Void in
                    if (error == nil) {
                        let image = UIImage(data:imageData!)

                            self.shoesImageView.image = image

                    }

                })//getDataInBackgroundWithBlock - end
            //}

            }//for - end

        }
        else{
            println("Error in retrieving \(error)")
        }

    })

其他元素的绝对定位导致奇怪的图像间距1px

1 个答案: