css – 响应地对齐,浮动和居中图像

我正在试图弄清楚如何编写我的HTML& CSS将3个屏幕截图图像对齐,如下面的屏幕截图所示.

这个想法是当用户调整窗口大小时,左右图像应向中心移动,或者在主图像后面更紧密,主图像始终保持居中.

我的开发链接：
http://leongaban.com/portfolio/athenasweb/

我的CodePen
http://codepen.io/leongaban/pen/AwJFt

提示或方向将非常感激！ ：d

HTML

irst">
            

CSS

div.inner .pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png');
    background-repeat: repeat;
    z-index:2;
 }    

.athena_thumbs {
    position: absolute;
    max-width: 1000px;
    margin: 250px auto 0;
}

.athena_thumbs .first {
    position: relative;
    margin: 0 auto;
    float: left;
    left: 25%;
    right: 25%;
    z-index: 3;
}

.athena_thumbs .second {
    position: relative;
    float: left;
    left: 10%;
    right: 5%;
    z-index: 2;
}

.athena_thumbs .third {
    position: relative;
    float: left;
    right: 10%;
    left: 5%;
    z-index: 1;
}

最佳答案

迟到的会议.
但是,如果你看看

代码笔：http://codepen.io/anon/pen/bazEr

.athena_thumbs {
    position: absolute;
    width: 90%;
    margin-left: 5%;  
    text-align: center;
    overflow: hidden;
}

.athena_thumbs .first {
    position: relative;
    margin: 0 auto;
    z-index: 3;
}

.athena_thumbs .second {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}

.athena_thumbs .third {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
}

我认为这会让你朝着正确的方向前进.
跨浏览器检查没有任何方法.
只是基本的效果或多或少到位.

希望这可以帮助.

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。